我刚遇到这种情况，溢出元素的隐藏区域仍然受到鼠标点击或鼠标悬停的影响。
我认为不可见的元素或区域不会成为鼠标事件的目标，那么，我在这里缺少什么？
下面是一个弹出此行为的示例，只需将鼠标悬停在圆圈外但靠近绿色方 block 的地方，您就会注意到 :hover 选择器生效。
#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 日:与 Chrome 不同，Firefox 的评论中没有指出这种奇怪的行为。
干杯， utxee.
最佳答案
根据 W3 规范 overflow: hidden 和 border-radius show 工作:
5.3. Corner Clipping
A box's backgrounds, but not its border-image, are clipped to the appropriate curve (as determined by ‘background-clip’). Other effects that clip to the border or padding edge (such as ‘overflow’ other than ‘visible’) also must clip to the curve. The content of replaced elements is always trimmed to the content edge curve. Also, the area outside the curve of the border edge does not accept mouse events on behalf of the element.
但事实并非如此(似乎是 WebKit 错误)。作为解决方案之一，您可以使用 clip-path property (目前除IE外所有主流浏览器都支持)像这样:
clip-path: inset(0 0 0 0 round 200px);
-webkit-clip-path: inset(0 0 0 0 round 200px);
关于css - 防止溢出元素隐藏区域被点击，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40964326/