表格悬停框架阴影（Webkit）

我的代码适用于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; 
}

来源

2011-05-12 Anthony C

我在'tr'找到样式没有最好的支持。 – alex 2011-05-12 01:56:33

由于这里回答：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/

更新：
演示2无边界（经典阴影）：http://jsfiddle.net/2nw4t/1/
演示3无插图（发光效果）：http://jsfiddle.net/2CSuM/

来源

2012-06-12 18:00:59 AvL

...但是，只适用于'inset'。 [相同的小提琴在阴影中没有'inset]（http://jsfiddle.net/2nw4t/） – 2012-08-31 21:51:35

它没有'inset'：[fiddle]工作（http://jsfiddle.net/2nw4t/1/）它是只有box-shadow（以前的'-3px'）的第四个属性看起来不太好。将其更改为“0”... – AvL 2012-09-03 11:14:34

嗯，你的确看起来很正确，+1！可惜我无法使用它，因为我的细胞是透明的（我只是想要一种“辉光般的”效果）。我的解决方案：在表格顶部覆盖一个列表（在这种情况下，“

-2

添加此

tr { 
    display: block; 
}

出于某种原因的Webkit需要明确知道该元素是一个块元素来显示一个盒子阴影。

来源

2011-06-30 19:04:36 ramono

这工作，但..表格行（自然）开始像一个普通的块元素。所以自动间距和colspan等会丢失。如果我们可以拥有我们的蛋糕并且也可以吃它，会不错。 – 2011-11-21 12:54:59

浏览器不喜欢，但... – DM8 2012-05-24 17:57:29

这发生在我身上，我在它上面放了一些小的边界半径，它可以工作。

border-radius: 1px;

根据你试图实现的外观，它可能是一个黑客，你可以使用。

来源

2012-05-28 20:08:15 Kenny

经过测试，无法正常工作。此外，即使您想要一个（至少在Webkit上，这是手头的问题），border-radius对表格行也没有任何影响。 – 2012-08-31 21:54:03

AvL的解决方案非常好，谢谢你的提示。如果你像我一样想在整个TR的box-shadow (inset)虽然，不只是一个侧面，这个代码应该帮助你：

tr:hover td { 
    -webkit-box-shadow: 0 4px 2px -3px rgba(0, 0, 0, 0.5) inset, 0 -4px 2px -3px rgba(0, 0, 0, 0.5) inset; 
} 
tr:hover td:first-child { 
    -webkit-box-shadow: 4px 4px 2px -3px rgba(0, 0, 0, 0.5) inset, 4px -4px 2px -3px rgba(0, 0, 0, 0.5) inset; 
} 
tr:hover td:last-child { 
    -webkit-box-shadow: -4px 4px 2px -3px rgba(0, 0, 0, 0.5) inset, -4px -4px 2px -3px rgba(0, 0, 0, 0.5) inset; 
}

来源

2014-10-03 01:42:47 Fanch

我面对这个问题，我发现了几个解决方法：

在所有td上添加阴影。
Set display: block on tr。
使用正确样式td:first-child:before。
给所有td添加阴影并覆盖我们不需要的部分。

您可以检查他们在此的jsfiddle： https://jsfiddle.net/maskl/cxscmvpr/3/

来源

2016-04-22 13:15:22 Marek

使用变换规模（1,1）与财产的box-shadow它会解决这个问题。

tr:hover { 
    transform: scale(1); 
    -webkit-transform: scale(1); 
    -moz-transform: scale(1); 
    box-shadow: 0px 0px 5px rgba(0,0,0,0.3); 
    -webkit-box-shadow: 0px 0px 5px rgba(0,0,0,0.3); 
    -moz-box-shadow: 0px 0px 5px rgba(0,0,0,0.3); 
}

小提琴：https://jsfiddle.net/ampicx/5p91xr48/

谢谢！

来源

2017-12-27 17:03:21

表格悬停框架阴影（Webkit）

回答

相关问题