所以我试图在我的桌子上添加一个盒子阴影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 中的显示方式的图像：
演示在这里 http://jsfiddle.net/Gx7Uy/
我如何编辑 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/ http://jsfiddle.net/Gx7Uy/6/
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
