防止可被点击的元素隐藏区域溢出

我刚刚遇到这种情况，即溢出元素的隐藏区域仍受鼠标点击或鼠标悬停的影响。防止可被点击的元素隐藏区域溢出

我认为一个不可见的元素或区域不会被鼠标事件作为目标，所以，我在这里错过了什么？

下面是一个弹出此行为的示例，只需将鼠标悬停在圆形外部但靠近绿色方块的位置，您将注意到：悬停选择器生效。

#circle { 
 
    position:absolute; 
 
    height: 50%; 
 
    width: 28%; 
 
    left: 50%; 
 
    top: 50%; 
 
    transform: translate(-50%, -50%); 
 
    background: black; 
 
    color: white; 
 
    border-radius: 200px; 
 
    overflow: hidden; 
 
    
 
} 
 

 
#square { 
 
    height: 50%; 
 
    width: 50%; 
 
    transform: translate(-50%, -50%); 
 
    background: green; 
 
    cursor: pointer; 
 

 
} 
 

 
#square:hover { 
 
    background: yellow; 
 
}

<body> 
 
    <div id="circle"> 
 
    <div id="square"></div> 
 
    </div> 
 
    
 
    </div>

添加于2016年12月5日：在Firefox中的评论中指出的不同情况为Chrome不会发生此奇怪的行为。

干杯， utxeee。

来源

2016-12-04 utxeee

是什么浏览器，你看到这个吗？在Firefox 50.0.1上，一切似乎都按预期工作。 – Rounin

说实话，我忘记提及我也在Firefox（48.0.2）上测试过它，并确认它在那里按预期工作。我现在正在使用Chrome（版本49.0.2623.112）。 – utxeee

这显然是一个闪烁渲染引擎的错误，但我无法弄清楚它来自哪里。我尝试将'pointer-events：none;'添加到'＃circle'和'pointer-events：auto;'到'＃square'，但它没有任何区别。 – Rounin

据W3规格溢出：隐藏和边界半径展工作：

5.3。角落剪辑

一个框的背景，但不是它的边框图像，剪切到适当的曲线（由'background-clip'确定）。其他影响剪辑到边框或填充边缘（例如“可见的以外的”溢出“）也必须剪切到曲线。被替换的元素的内容总是被修剪为内容边缘曲线。此外，边界曲线外侧的区域不接受代表元素的的鼠标事件。

但它不（看起来像WebKit的错误）。正如你可以使用clip-path property解决方案的一个这样的（目前除了IE以外所有主流浏览器支持）：

clip-path: inset(0 0 0 0 round 200px); 
-webkit-clip-path: inset(0 0 0 0 round 200px);

来源

2016-12-07 09:31:39

Hi @Avadon，这种行为是Blink> HitTesting组件的错误。无论如何，感谢您的帮助;） – utxeee

防止可被点击的元素隐藏区域溢出

回答

相关问题