个人中心
gpt4 book ai didi

Hover not working after using custom cursor(使用自定义光标后悬停不起作用)

转载 作者：bug小助手 更新时间：2023-10-25 17:31:09 25 4
gpt4 key购买 nike



I'm building a clone of a website (sidecup family golf), in which i created a custom cursor after which my hover elements stopped working (for example if i rapidly move my cursor on that element then the hover effect starts showing otherwise it wont).

我正在建立一个网站的克隆(SideCup家庭高尔夫)，我在其中创建了一个定制光标，在此之后我的悬停元素停止工作(例如，如果我在该元素上快速移动光标，则悬停效果开始显示，否则就不会)。


Here is my code:

以下是我的代码：


* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Montserrat", sans-serif;
  color: #fff;
}

body {
  height: 100%;
  width: 100%;
  position: relative;
}

#cursor {
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background-color: #95c11e;
  position: fixed;
  z-index: 9999;
}

And here is my JS code:

下面是我的JS代码：


var crsr = document.querySelector("#cursor");
document.addEventListener("mousemove", (e) => {
  crsr.style.left = e.clientX - 10 + "px";
  crsr.style.top = e.clientY - 10 + "px";
});

I have tried changing position of my cursor to relative after which my hover started working perfectly fine but then whenever I scroll my custom cursor move away (like the amount of time I'll scroll the cursor go away from its original position or away from my mouse cursor).

我试着将光标的位置更改为相对位置，之后我的悬停开始工作得很好，但是每当我滚动我的自定义光标时，它就会离开(比如我滚动光标离开原始位置或离开鼠标光标的时间量)。


Can you guys take a look at my code and tell me what am I doing wrong.

你们能看看我的代码，告诉我我哪里做错了吗？


Thanks.

谢谢。


更多回答
优秀答案推荐

The problem here seems to be that you're adding some html element as custom cursor which is being positioned on top of everything in your page, thus, all the focus os given to that custom cursor element, which is blocking the interaction with any other element.

这里的问题似乎是，你添加了一些html元素作为自定义光标，它被定位在页面中的所有内容之上，因此，所有的焦点都被赋予了自定义光标元素，这阻碍了与任何其他元素的交互。


I suggest you to change the custom css of your cursor to let the pointer-events ignore that element. Something like this:

我建议您更改光标的自定义css，让指针事件忽略该元素。大概是这样的：


#cursor {
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background-color: #95c11e;
  position: fixed;
  z-index: 9999;
  pointer-events: none; /* Add this line */
}

With this, should be enough.

有了这个，应该就足够了。


更多回答

It's worth noting that pointer-events is not standardized, although all major browsers implement it.

值得注意的是，指针事件并没有标准化，尽管所有主流浏览器都实现了它。

@AlejandroOlivares yea it worked TYSM!

@AlejandroOlivares是的，它成功了，Tysm！

25 4 0
文章推荐： Add image insde CAShapeLayer(在CAShapeLayer中添加图像)
文章推荐： Allow a custom Attribute only on specific type(仅允许在特定类型上使用自定义属性)
文章推荐： how can I check the one element in list has repeated three times In dart?(我如何检查列表中的一个元素在DART中重复了三次？)
文章推荐： How do I make sure my PC program is receiving socketio events from my phone?(如何确保我的PC程序正在从我的手机接收Socketio事件？)
bug小助手
个人简介

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

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