CSS 悬停时的表格行框阴影（Webkit）

Table Row Box-Shadow on Hover (Webkit)

提问by Anthony C

Is this possible?

这可能吗？

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:

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

回答by AvL

As answered here: https://stackoverflow.com/a/11002077/1106393rather than styling tryou should style the td-element in combination with the pseudo classes :first-childand :last-child. Prepending tr:hoverwill do the trick for you:

如此处所回答：https: //stackoverflow.com/a/11002077/1106393而不是样式化，tr您应该将td-element 与伪类: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;
}

Demo 1with inset: http://jsfiddle.net/Kk6Th/

带插图的演示 1：http: //jsfiddle.net/Kk6Th/

Update:
Demo 2without inset (classic drop shadow): http://jsfiddle.net/2nw4t/1/
Demo 3without inset (gloweffect): http://jsfiddle.net/2CSuM/

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

回答by Anurag Malhotra

Use transform scale(1,1)property with box-shadow it will solve the problem.

使用带有 box-shadow 的transform scale(1,1)属性可以解决问题。

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);
}

Fiddle: https://jsfiddle.net/ampicx/5p91xr48/

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

Thanks!!

谢谢！！

回答by Kenneth Petty

I ran into this post while dealing with a similar problem, recently. I think I have found another approach using the display: flex;along with position: relative;properties on your trelement in CSS with much less markup (little tdstyling and less psuedo styling):

我最近在处理类似问题时遇到了这篇文章。我想我找到了另一种方法display: flex;，在 CSS 中position: relative;的tr元素上使用with属性，标记更少（td样式少，伪样式少）：

Setup tras flexbox

设置tr为 flexbox

tr {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    position: relative;
    align-items: center; /* Vertically aligns td's inside the tr */        
}

This sets up the TR as a flexbox which allows it to be affected by z-indexwithout breaking it's position in the DOM. All you need to, then, is adjust the z-indexof the tr:hoverpseudo element and add your background-colorand box-shadoweffects:

这将 TR 设置为一个 flexbox，允许它在z-index不破坏它在 DOM 中的位置的情况下受到影响。所有你需要的话，就是调整z-index了的tr:hover伪元素，并添加您background-color和box-shadow效果：

Setup :hoverEffects

设置:hover效果

tr:hover {
    z-index: 1 /* or higher if necessary */
    -webkit-box-shadow: 0px 2px 4px #e06547;
    -moz-box-shadow: 0px 2px 4px #e06547;
    box-shadow: 0px 2px 4px #e06547;
    background-color: #d4d5d6;
}

You may need to adjust the size and position of tdelements inside of the trflexbox using the align-itemssince we are no longer using the tr's default display: table-rowproperty. You would center your tdelements vertically using thr align-items: center;property (see above). Then you set your td width

由于我们不再使用 tr 的默认属性，因此您可能需要使用 调整flexboxtd内元素的大小和位置。您将使用 thr属性垂直居中元素（见上文）。然后你设置你的 td 宽度tralign-itemsdisplay: table-rowtdalign-items: center;

td {
    width: 10em;
}

See the working fiddle here: https://jsfiddle.net/t68b9cwd/6/

请参阅此处的工作小提琴：https: //jsfiddle.net/t68b9cwd/6/

This solution is fairly universal, with modern browsers handling this without prefixes but their may be instances with older browsers that you may need to perform workarounds (https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Backwards_Compatibility_of_Flexbox) and is similar to how Google styles the rows in Gmail.

此解决方案相当普遍，现代浏览器无需前缀即可处理此问题，但它们可能是旧浏览器的实例，您可能需要执行变通方法 ( https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout /Backwards_Compatibility_of_Flexbox) 并且类似于 Google 如何设置 Gmail 中的行。

回答by Marek

I am facing this problem and I found a few workarounds:

我正面临这个问题，我找到了一些解决方法：

1. Add shadow on all td.
2. Set display: blockon tr.
3. Use properly styled td:first-child:before.
4. Add shadow to all tdand cover parts that we don't need.

1. 在所有上添加阴影td。
2. 设置display: block上tr。
3. 使用正确的样式td:first-child:before。
4. 为所有添加阴影td并覆盖我们不需要的部分。

You can check them on this jsFiddle: https://jsfiddle.net/maskl/cxscmvpr/3/

你可以在这个 jsFiddle 上查看它们：https://jsfiddle.net/maskl/cxscmvpr/3/

回答by Kenny

This happened to me and I put some minor border-radius on it, and it works.

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

border-radius: 1px;

Depending on the look you are trying to achieve, it might be a hack you can use.

根据您尝试实现的外观，它可能是您可以使用的 hack。

回答by Fanch

AvL's solution is very good, thank you for the tip. Though if like me you want the box-shadow (inset)in the whole tr, not just a side, this code should help you :

AvL的解决方案很好，谢谢指点。虽然如果像我一样你想要box-shadow (inset)整体tr，而不仅仅是一面，这段代码应该可以帮助你：

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;
}

回答by ramono

Add this

添加这个

tr {
    display: block;
}

For some reason Webkit needs to explicitly know that the element is a block element to display a box-shadow.

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