Html 如何在悬停时向表格 tr 元素添加框阴影？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22601380/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to add a box shadow to a table tr element upon hover?
提问by Fizzix
So I am attempting to add a box shadow to my table trelement upon hover.
所以我试图tr在悬停时为我的表格元素添加一个框阴影。
Currently, it is working perfectly in Firefox, but no other browser.
目前，它在 Firefox 中运行良好，但没有其他浏览器。
CSS:
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:
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>
Here is an image of how it displays in Firefox:
这是它在 Firefox 中的显示方式的图像：
Here is an image of how it displays in Chrome:
这是它在 Chrome 中的显示方式的图像：
How could I edit my CSS to apply this box shadow hover for all browsers?
如何编辑我的 CSS 以将这个框阴影悬停应用于所有浏览器？
回答by jignesh kheni
This is your css i edited
这是我编辑的你的 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;
}
Here is demo link - http://jsfiddle.net/Gx7Uy/6/
这是演示链接 - http://jsfiddle.net/Gx7Uy/6/
回答by rajesh kakawat
try something like this,FIDDLE
尝试这样的事情，FIDDLE
tr { display: block; }
For explanation check this out
有关解释，请查看
