我正在建立一个网站,我需要一个自定义光标来代替默认光标,我创建了一个,它正在检测鼠标移动但是当我尝试将它放在超链接上时,没有任何事情发生。这是我的代码
HTML
<div class='cursor'></div>
<div class='cursor'></div>
<h1>Custom cursor</h1>
<a href="#">A link </a>
CSS
* {
cursor: none;
}
.cursor {
position: absolute;
height: 10px;
width: 10px;
border-radius: 50%;
transform: translateX(-50%) translateY(-50%);
z-index: 99999;
}
.cursor:nth-child(1) {
background-color: #3A1C71;
z-index: 999999;
}
.cursor:nth-child(2) {
background-color: #FFAF7B;
}
JS
$(document)
.mousemove(function(e) {
$('.cursor')
.eq(0)
.css({
left: e.pageX,
top: e.pageY
});
setTimeout(function() {
$('.cursor')
.eq(1)
.css({
left: e.pageX,
top: e.pageY
});
}, 100);
})
我将非常感谢您的帮助
谢谢:)
答案 0 :(得分:1)
没有必要手动为自定义光标执行所有操作。如果你有一个可以用作光标的图像,你可以像这样引用它:
cursor: url('path-to-image.png'), auto;
有关详细信息,请参阅此处:MDN reference
如果您想使用当前的解决方案:
超链接没有反应,因为两个光标div位于它之上,因此阻止了链接本身。
可以为这些div禁用鼠标事件。然后这些事件将触及底层元素:
.cursor {
pointer-events: none;
}