表行悬浮的盒子阴影（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屋！