个人中心
gpt4 book ai didi

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

转载 作者：技术小花猫 更新时间：2023-10-29 11:43:31 26 4
gpt4 key购买 nike

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

我认为不可见的元素或区域不会成为鼠标事件的目标，那么，我在这里缺少什么？

下面是一个弹出此行为的示例，只需将鼠标悬停在圆圈外但靠近绿色方 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/

26 4 0
文章推荐： html - 将一个div放在一个新行上(由 float
文章推荐： linux - 命令运行 Linux 时如何输出重定向以覆盖文件？
文章推荐： html - 如何在内容增长时阻止表格调整大小？
文章推荐： linux - ulimit -Hn的限制
技术小花猫
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com