我有以下设置:
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事件,其中包含一些操作(仅为演示目的显示颜色更改)。
我的问题是鼠标事件会触发,即使我将鼠标悬停在圆圈之外,但仍然位于播放列表项目区域(由父级边框半径修剪)。
是否可以防止此行为,以便鼠标事件不会在可见圈外发射?
答案 0 :(得分:2)
这是因为当与div元素接触时应用鼠标悬停,如果你检查代码,你可以看到div的区域总是一个矩形,而不是使用div作为圆形或创建圆形,使用更好的其他如canvas / svg。
答案 1 :(得分:0)
我有一个类似的问题,checking if the mouse inside circle解决了。
const isMouseInsideCircle = ({
xMouse,
yMouse,
xCenter,
yCenter,
radius
}) => radius > Math.sqrt(Math.pow(xMouse - xCenter, 2) + Math.pow(yMouse - yCenter, 2))
答案 2 :(得分:0)
好的,这是一个老问题,但我在研究类似的东西时遇到了它。
您可以尝试使用 overflow: hidden
或使用 clip-path
属性代替 border-radius
。