CSS 溢出边界半径鼠标事件

Css overflow border radius mouse events

本文关键字：鼠标 事件 溢出 边界 CSS      更新时间：2023-09-26

我有以下设置：

https://jsfiddle.net/t3jkwgzz/1/

<div class="playlist-inner-wrapper">
  <div class="playlist-content">
    <div class="playlist-item"></div>
    <div class="playlist-item"></div>
 </div>
</div>

每个播放列表项都有mouseenter/mouseleave事件，其中包含一些操作（颜色更改仅用于演示目的）。

我的问题是，即使我将鼠标悬停在圆圈外，鼠标事件也会触发，但仍然在播放列表项目区域（由父项上的边框半径剪裁

）。

是否可以防止此行为，以便鼠标事件不会在可见圆圈之外触发？

这是因为在

与div元素接触时应用鼠标悬停，如果你检查代码，你可以看到div的区域总是一个矩形，而不是使用div进行圆形或创建圆形，使用更好的其他方式作为画布/svg。

好吧，这是一个老问题，但我在研究类似的东西时遇到了它。

您可以尝试使用 overflow: hidden 或使用 clip-path 属性而不是 border-radius 。

我通过检查鼠标是否在圆圈内解决了类似的问题。

const isMouseInsideCircle = ({
  xMouse,
  yMouse,
  xCenter,
  yCenter,
  radius
}) => radius > Math.sqrt(Math.pow(xMouse - xCenter, 2) + Math.pow(yMouse - yCenter, 2))

请在此处查看 https://jsfiddle.net/howareyouami/g7zL5v81/17/

相关文章：