悬停效果超出边界

Question

这是我的 JSFiddle，我有一个 table，在悬停时，它的行应该改变颜色，如下所示：

.hover-row:hover {
  background-color: #FFEFC6;
}

但是，在最后一行，悬停效果会溢出（包装器有一些半径）。我们可以做些什么来防止这种情况发生吗？

我试过 z-index and/or border-radius，但是没有任何效果！

Answer 1

您没有看到结果，因为您的 :hover class 位于 css 的顶部。它需要低于您的基础 classes，否则级联规则适用于它。当您向下移动它时，您可以对其应用边界半径。

border-radius:10px;

http://jsfiddle.net/q2w4jjyt/23/

但是，我会专门针对 Team 6 行设置一个 ID，这样 Team 5 就不会得到半径，看起来很傻。

Answer 2

您可以在 .wrap 上设置 overflow: hidden;。

Jsfiddle