悬停在溢出隐藏和边界半径错误 [英] hover on overflow-hidden and border-radius bug

问题描述

试图解决最近的一个问题，我发现了一个看起来像Chrome和IE的bug。

当我设置2个div时，并且包含的​​div具有border-radius和overflow：hidden，则内部div将响应悬停在不应该为该区域的地方。

b
$ b

在这个片段中，将鼠标悬停在灰色区域。内部div会改变颜色。这发生在IE和Chrome，但不是在FF中=falsedata-babel =false>

.innerw，。 innerw2 {width：240px; height：240px;位置：相对; border-radius：50％;}。innerw {left：0px; top：0px; overflow：hidden;}。innerw2 {left：80px; top：0px;背景颜色：palegreen;}。innerw2：hover {background-color：green;}。inner2 {left：168px;顶部：13px;宽度：79px; height：229px;背景颜色：灰色; z-index：-1; position：absolute;}

 < div class =innerw >< div class =innerw2>< / div>< / div>< div class =inner2>< / div>   
 
 
我想知道一种避免这种错误的方法。 h2_lin>解决方案

我认为这与相对定位有关。如果您放弃.innerw2上的相对位置，并使用margin-left，则不再发生这种情况。

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.

解决方案

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.

这篇关于悬停在溢出隐藏和边界半径错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！