这可能吗？
我的代码适用于 Firefox。我还可以让 webkit 在悬停时更改其他属性(例如背景颜色等)，但框阴影不会生效:
tr:hover {
-webkit-box-shadow: 0px 2px 4px #e06547;
-moz-box-shadow: 0px 2px 4px #e06547;
box-shadow: 0px 2px 4px #e06547;
background-color: #d4d5d6;
}
最佳答案
如此处回答:https://stackoverflow.com/a/11002077/1106393与其设置 tr 样式，不如将 td 元素与伪类 :first-child 和 :last-child 结合使用。前置 tr:hover 将为您解决问题:
tr:hover td {
-moz-box-shadow: 0 4px 2px -3px rgba(0, 0, 0, 0.5) inset;
-webkit-box-shadow: 0 4px 2px -3px rgba(0, 0, 0, 0.5) inset;
box-shadow: 0 4px 2px -3px rgba(0, 0, 0, 0.5) inset;
}
tr:hover td:first-child {
-moz-box-shadow: 4px 4px 2px -3px rgba(0, 0, 0, 0.5) inset;
-webkit-box-shadow: 4px 4px 2px -3px rgba(0, 0, 0, 0.5) inset;
box-shadow: 4px 4px 2px -3px rgba(0, 0, 0, 0.5) inset;
}
tr:hover td:last-child {
-moz-box-shadow: 0 4px 2px -3px rgba(0, 0, 0, 0.5) inset;
-webkit-box-shadow: 0 4px 2px -3px rgba(0, 0, 0, 0.5) inset;
box-shadow: 0 4px 2px -3px rgba(0, 0, 0, 0.5) inset;
}
演示 1 带插图:http://jsfiddle.net/Kk6Th/
更新:
Demo 2 无插图(经典投影):http://jsfiddle.net/2nw4t/1/
演示 3 无插图(发光 效果):http://jsfiddle.net/2CSuM/
关于css - 表行框-悬停时的阴影(Webkit)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5972525/