表行悬浮的盒子阴影(Webkit) [英] Table Row Box-Shadow on Hover (Webkit)
问题描述
这是否可能?
我的代码适用于Firefox。我也可以让webkit更改其他属性(例如背景颜色等)悬停,但框阴影不生效:
My code works on Firefox. I can also get webkit to change other properties (e.g. background color, etc.) on hover, but the box shadow doesn't take effect:
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;
}
推荐答案
href =http://stackoverflow.com/a/11002077/1106393> http://stackoverflow.com/a/11002077/1106393 ,而不是样式 tr
您应该将 td
-element与伪类:first-child
和:last-child
。在 tr:hover
前面加上
As answered here: http://stackoverflow.com/a/11002077/1106393 rather than styling tr
you should style the td
-element in combination with the pseudo classes :first-child
and :last-child
. Prepending tr:hover
will do the trick for you:
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/ =noreferrer> http://jsfiddle.net/Kk6Th/
Demo 1 with inset: http://jsfiddle.net/Kk6Th/
更新: br>
演示2 (不带插入)(经典投影): http:/ /jsfiddle.net/2nw4t/1/
演示3 没有插入(发光效果): http://jsfiddle.net/2CSuM/
Update:
Demo 2 without inset (classic drop shadow): http://jsfiddle.net/2nw4t/1/
Demo 3 without inset (glow effect): http://jsfiddle.net/2CSuM/
这篇关于表行悬浮的盒子阴影(Webkit)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!