Question

我正在尝试使用js创建自定义游标（我们不要讨论我的糟糕js）。我设置了光标：没有为html标签以及*：hover设置。这应该使光标永远不可见。但是，当您快速将鼠标悬停在链接上时，指针会闪烁，并且您可以瞬间看到它。我该如何解决？

这是一个显示该问题的代码笔。 https://codepen.io/jacobyoon/pen/GPJdNQ

谢谢。

HTML

<html>
  <body>
    <div id="cursor"></div>
     <a href="#">Link</a>
  </body>
</html>

CSS

html {
  cursor: none;
}
*:hover {
  cursor:none;
}
a {
  padding: 20px;
  color: white;
  background: black;
  text-decoration: none;
}
#cursor {
  position: absolute;
  background: red;
  height: 10px;
  width: 10px;
  border-radius: 5px;
}

JS

window.addEventListener('mousemove', cursor);
var $win = $(window);
var _cursor = document.getElementById('cursor');

function everyTick() {
    cursor();
    setTimeout(arguments.callee, 0);
}

function getX(event) //left position
{
    if(!event.pageX)
    {
        return event.clientX;
    }
        else
    {
        return event.pageX - (document.body.scrollLeft || document.documentElement.scrollLeft);
    }
}

function getY(event) //top position
{
    if(event.pageY)
    {
        return event.pageY - (document.body.scrollTop || document.documentElement.scrollTop);
    }
        else
    {
        return event.clientY;
    }
}

var offset = 5;

function cursor() {
    _cursor.style.top = getY(event) - 4 + "px";
    _cursor.style.left = getX(event) - 4 + "px";
    _cursorFollower.style.top = getY(event) - offset + "px";
    _cursorFollower.style.left = getX(event) - offset + "px";
}

Answer 1

结果就是这样做。

a {cursor: none;}

Answer 2

尝试在您的html文件中使用此<a href="#" style="cursor:none">Link</a>。

window.addEventListener('mousemove', cursor);
var $win = $(window);
var _cursor = document.getElementById('cursor');

function everyTick() {
    cursor();
    setTimeout(arguments.callee, 0);
}

function getX(event) //left position
{
    if(!event.pageX)
    {
        return event.clientX;
    }
        else
    {
        return event.pageX - (document.body.scrollLeft || document.documentElement.scrollLeft);
    }
}

function getY(event) //top position
{
    if(event.pageY)
    {
        return event.pageY - (document.body.scrollTop || document.documentElement.scrollTop);
    }
        else
    {
        return event.clientY;
    }
}

var offset = 5;

function cursor() {
    _cursor.style.top = getY(event) - 4 + "px";
	_cursor.style.left = getX(event) - 4 + "px";
    _cursorFollower.style.top = getY(event) - offset + "px";
    _cursorFollower.style.left = getX(event) - offset + "px";
}

html {
  cursor: none;
}

html *:hover {
  cursor: none;
}

a {
  padding: 20px;
  color: white;
  background: black;
  text-decoration: none;
}

#cursor {
  position: absolute;
  background: red;
  height: 10px;
  width: 10px;
  border-radius: 5px;
}

<html>
  <body>
    <div id="cursor"></div>
     <a href="#" style="cursor:none">Link</a>
  </body>
</html>

Answer 3

使用此：

* {
  cursor:none !important;
}

基本上，当您将cursor: none应用于HTML元素时，仅当另一个元素没有光标样式时才优先-对于a元素，几乎每个元素浏览器的样式为cursor: pointer。

下面的代码仅在悬停元素时才生效，这就是造成较小延迟的原因。

*:hover {
  cursor:none;
}

即使将光标悬停在光标上，光标也会闪烁。

3 个答案: