带有JS的自定义PNG鼠标光标
带有JS的自定义PNG鼠标光标
提问于 2022-10-26 04:18:50
我想用JS改变网页上的鼠标光标。我的问题是:如何将一个图标更改为默认模式，将另一个图标更改为指针模式。我试过这样做：
document.documentElement.style.cursor = 'url("https://www.happygourmet.co.uk/img/icon_plus.png"), default';
document.documentElement.style.cursor = 'url("https://img.icons8.com/emoji/72/camping.png"), pointer';这里的问题是，只有鼠标指针的最后一行工作，我没有看到第一个图标。
编辑:由于默认(箭头)和指针(手)的默认情况下有不同的诅咒，我希望这里有两个不同的PNG，以及默认和指针。
回答 1
Stack Overflow用户
发布于 2022-10-26 04:40:34
您的第二行代码覆盖了第一行代码，因此您看不到第一个图标。
您的想法是在页面上不同的位置上显示不同的光标样式吗？您需要分别创建不同的元素容器，然后使用addEventListener侦听。下面是代码片段：
小提琴手：https://jsfiddle.net/x632tnbj/10/
html：
<div>
<div id="default-mode"></div>
<div id="pointer-mode"></div>
</div>css：
#default-mode {
width: 300;
height: 300px;
background-color: lightblue;
}
#pointer-mode {
width: 300;
height: 300px;
background-color: yellow;
}联署材料：
const defaultBox = document.querySelector('#default-mode');
const pointerBox = document.querySelector('#pointer-mode');
defaultBox.addEventListener('mouseover', () => {
document.documentElement.style.cursor = 'url("https://www.happygourmet.co.uk/img/icon_plus.png"), default';
});
pointerBox.addEventListener('mouseover', () => {
document.documentElement.style.cursor = 'url("https://img.icons8.com/emoji/72/camping.png"), pointer';
});编辑：只是将类名cursor-default或cursor-pointer添加到元素中。事实上，这个想法和我以前的回答是一样的，只是所有具有游标默认值和光标指针的元素都会被监听。
<div>
<div id="default-mode1" class="cursor-default"></div>
<div id="pointer-mode1" class="cursor-pointer"></div>
<div id="default-mode2" class="cursor-default"></div>
<div id="pointer-mode2" class="cursor-pointer"></div>
</div>const defaultElements = document.querySelectorAll('.cursor-default');
const pointerElements = document.querySelectorAll('.cursor-pointer');
defaultElements.forEach((el) => {
el.addEventListener('mouseover', () => {
document.documentElement.style.cursor = 'url("https://www.happygourmet.co.uk/img/icon_plus.png"), default';
});
});
pointerElements.forEach((el) => {
el.addEventListener('mouseover', () => {
document.documentElement.style.cursor = 'url("https://img.icons8.com/emoji/72/camping.png"), pointer';
});
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/74202664
复制相关文章
相似问题
腾讯云开发者
