我有一个非常简单的HTML表格，如下所示：
<table>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr><!-- Table Row -->
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</tbody>
</table>
当我将鼠标悬停在每个单元格上时，单元格的边框可能会更改颜色。所以我写了下面的CSS试图达到这个效果：
table{
position: absolute;
font-family:Arial, Helvetica, sans-serif;
color:white;
font-size:12px;
border:white 1px solid;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
-moz-box-shadow: 0 1px 2px #d1d1d1;
-webkit-box-shadow: 0 1px 2px #d1d1d1;
box-shadow: 0 1px 2px #d1d1d1;
width: 100%;
height: 100%%;
}
table tr {
text-align: center;
padding-left:20px;
}
table td {
padding:18px;
border-top: 1px solid #ffffff;
border-bottom:1px solid #e0e0e0;
border-left: 1px solid #e0e0e0;
width: 33%;
height: 50%;
background-color: black;
}
table td:hover{
border:blue 1px solid;
}
此代码有效，但并非完美。当我将鼠标悬停在单元格1、2、3（如html中的编号）上时，效果很好，但是当我将鼠标悬停在例如单元格4 5 6上时，该单元格的顶部边框未显示蓝色。我认为它们的顶部边框被上方单元格的底部边框覆盖。
有没有解决这个问题的方法？
将border-collapse设置为塌陷时，解决方案是对所有单元格使用插入边框，对鼠标悬停的单元格使用实线边框。这是建议的CSS动作：http : //jsfiddle.net/QmHGG/
以下是应用于表的CSS：
table, tr, td {
border: 1px inset black;
border-collapse: collapse;
border-spacing: 0;
}
td:hover {
border: 1px solid red;
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句