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

Question

试图解决最近的一个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，则不会再发生这种情况。