<分区>
html - 如何在悬停时向表格 tr 元素添加框阴影？
所以我试图在悬停时向我的表格 tr 元素添加一个框阴影。
目前，它在 Firefox 中运行良好，但没有其他浏览器。
CSS:
table tbody tr:hover {
background-color:#13326b;
color:#ffffff;
text-shadow: 1px 2px #000000;
box-shadow: 0px 0px 10px #ff0000;
-webkit-box-shadow: 0px 0px 10px #ff0000;
-moz-box-shadow: 0px 0px 10px #ff0000;
}
HTML:
<table class="table table-list-search">
<thead>
<tr>
<th>Logo</th>
<th>Name</th>
<th>Symbol</th>
<th>Sector</th>
<th>Sub-Sector</th>
</tr>
</thead>
<tbody>
<tr>
<td>Sample</td>
<td>Filter</td>
<td>12-11-2011 11:11</td>
<td>OK</td>
<td>123</td>
</tr>
<tr>
<td>Try</td>
<td>It</td>
<td>11-20-2013 08:56</td>
<td>It</td>
<td>Works</td>
</tr>
<tr>
<td>§</td>
<td>$</td>
<td>%</td>
<td>&</td>
<td>/</td>
</tr>
</tbody>
</table>
这是它在 Firefox 中的显示方式的图像:
这是它在 Chrome 中的显示方式的图像:
我如何编辑我的 CSS 以便为所有浏览器应用此框阴影悬停？
最佳答案
这是我编辑的你的CSS
table {
box-sizing: border-box;
border-bottom: 1px solid #e8e8e8;
}
table tbody tr:hover {
background-color:#13326b;
color:#ffffff;
text-shadow: 1px 2px #000000;
box-shadow: 0px 0px 10px #ff0000;
-webkit-box-shadow: 0px 0px 10px #ff0000;
-moz-box-shadow: 0px 0px 10px #ff0000;
}
td, th {
padding-left: 16px;
min-width: 170px;
text-align: left;
}
tr {
display: block;
}
table tbody tr , table tbody td{
height:100px;
}
这是演示链接 - http://jsfiddle.net/Gx7Uy/6/
关于html - 如何在悬停时向表格 tr 元素添加框阴影？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22601380/