hover on overflow-hidden and border-radius bug

问题:

Trying to solve a recent question, I found out what looks like a Chrome and IE bug.

When I set 2 divs, and the containing div has border-radius and overflow: hidden, the inner div is responding to hover on the area that shouldn't be

In this snippet, hover the grey area. The inner div will change color. This happens in IE and Chrome, but not in 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>

I would like to know a way to avoid this bug.

回答1:

I think this has to do with the relative positioning. If you drop the relative positioning on .innerw2, and use margin-left instead, this no longer occurs.