title: hover on overflow-hidden and border-radius bug
body: <p>Trying to solve a recent <a href="https://stackoverflow.com/a/29455658/1926369">question</a>, I found out what looks like a Chrome and IE bug.</p>
  
  <p>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</p>
  
  <p>In this snippet, hover the grey area. The inner div will change color. This happens in IE and Chrome, but not in FF</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="innerw"&gt;
  &lt;div class="innerw2"&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="inner2"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I would like to know a way to avoid this bug.</p>