悬停效果超出边界

Posted 2023-05-08

【中文标题】悬停效果超出边界

【英文标题】：Hover effect goes out of border

【发布时间】：2016-03-17 19:49:00

【问题描述】：

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

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

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

我尝试过使用z-index 和/或border-radius，但它不会有任何效果！

【问题讨论】：

检查this。

@alirezasafian 哇，完美，你是怎么做到的？我的意思是一个答案会很好。

把overflow: hidden;给.wrap。

【参考方案1】：

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

Jsfiddle

【参考方案2】：

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

border-radius:10px;

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

但是，我会专门针对带有 ID 的 Team 6 行，这样 Team 5 就不会获得半径并且看起来很傻。