悬停在溢出隐藏和边界半径错误上

Question

试图解决最近的，我发现了一个 Chrome 和 IE 错误。

当我设置 2 div 时，包含的 div 有 border-radius 和 overflow: hidden，内部 div 响应悬停在不应该的区域不会

在此代码段中，将鼠标悬停在灰色区域。里面的div会变色。这在 IE 和 Chrome 中发生，但在 FF

中不会发生

.innerw, .innerw2 {
  width: 240px;
  height: 240px;
  position: relative;
  border-radius: 50%;
}

.innerw {
  left: 0px;
  top: 0px;
  overflow: hidden;
}

.innerw2 {
  left: 80px;
  top: 0px;
    background-color: palegreen;
}


.innerw2:hover {
  background-color: green;
}

.inner2 {
  left: 168px;
  top: 13px;
  width: 79px;
  height: 229px;
  background-color: grey;
  z-index: -1;
  position: absolute;
}

<div class="innerw">
<div class="innerw2">
</div>
</div>
<div class="inner2"></div>

我想知道避免这个错误的方法。

Answer 1

我认为这与相对定位有关。如果您将相对定位放在 .innerw2 上，并改用 margin-left，则不会再出现这种情况。

悬停在溢出隐藏和边界半径错误上

hover on overflow-hidden and border-radius bug

css

internet-explorer

google-chrome