Question

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

我认为鼠标事件不会成为一个看不见的元素或区域，所以，我在这里缺少什么？

按照弹出此行为的示例，只需将鼠标悬停在圆圈外但靠近绿色方块，您会注意到：悬停选择器生效。

#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-05添加：这种奇怪的行为不会像Firefox中的评论中指出的那样发生，与Chrome不同。

干杯， utxeee。

Answer 1

根据W3规范溢出：hidden和border-radius显示工作：

5.3。角落剪辑

一个盒子的背景，但不是它的边框图像，被剪切到了   适当的曲线（由'background-clip'确定）。其他影响   该剪辑到边框或填充边缘（例如'溢出'除了   'visible'）也必须剪辑到曲线。替换的内容   元素始终被修剪为内容边缘曲线。此外，该地区   边界边缘的曲线外部不接受鼠标事件   代表元素。

但它没有（似乎是一个WebKit错误）。作为解决方案之一，您可以使用clip-path property（目前除IE之外的所有主流浏览器都支持），如下所示：

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

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

1 个答案: