将鼠标悬停在overflow-hidden和border-radius错误上

Question

尝试解决最近的question，我发现了Chrome和IE浏览器的错误。

当我设置2个div，并且包含div有border-radius和overflow：hidden时，内部div响应将鼠标悬停在不应该

的区域上

在此代码段中，将鼠标悬停在灰色区域。内部div会改变颜色。这种情况发生在IE和Chrome中，但不在FF

中

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

Answer 1

我认为这与相对定位有关。如果你将相对定位放在.innerw2上，而使用margin-left代替，则不再出现这种情况。