如何在多个鼠标上更改光标
如何在多个鼠标上更改光标
提问于 2018-06-14 04:26:59
我试图将光标更改为不同的图像，具体取决于它在我的横幅内盘旋的对象。目前，我只知道如何在CSS中更改光标样式。但游标始终保持不变。如何替换javascript中鼠标上方的光标图像？我只使用jQuery和TweenMax，因为这是一个任务。
回答 1
Stack Overflow用户
发布于 2018-06-14 13:59:17
使用CSScursor财产
如果不使用css中的任何伪选择器，则可以通过使用cursor财产。甚至通过链接图标的URL来添加自己的图标。
例如，下面的代码将显示您在灰色区域上悬停时的心情：
.heart {
cursor: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/9632/heart.png"), auto;
width: 200px;
height: 200px;
background: grey;
}<div class="heart"></div>
可以更改图像相对于实际鼠标位置的起始位置，方法是将x和y与URL一起在cursor财产：
cursor: url(<URL>) [x y|auto];使用JavaScript
当然，可以使用JavaScript代码处理这个特性。以下是我们实现这一目标所需要的几点：
- 创建一个HTML元素，并以想要的光标的图像作为背景
- 使用onmouseenter，onmousemove和onmouseleave事件
- 获取鼠标在页面上的位置：属性pageX，pageY
- 设置我们的位置cursor元素位于鼠标的位置(实际鼠标指针将被隐藏)：transformCSS属性
我还使用了其他一些技巧来使其正确：例如，将这些框的溢出设置为hidden所以cursor元素在盒子外是看不见的。同时，听着onmouseleave事件允许我们隐藏cursor当鼠标位于框区之外时，引发。
我在这里做了一个小演示，单击Showcode代码段>Run代码段：
const showCursor = function(event) {
let cursor = event.target.querySelector('.cursor');
event.target.onmousemove = function(e) {
cursor.style.display = 'block'
let [x, y] = [e.pageX - e.target.offsetLeft - 20, e.pageY - e.target.offsetTop - 20]
cursor.style.transform = `translate(${x}px, ${y}px)`
}
event.target.onmouseleave = function(e) {
cursor.style.display = 'none'
}
}.box {
cursor: none;
overflow: hidden;
width: 200px;
height: 200px;
background: pink;
display: inline-block;
margin: 10px;
}
.box:nth-child(1) {
background: aquamarine;
}
.box:nth-child(2) {
background: pink;
}
.box:nth-child(3) {
background: cornflowerblue;
}
.box:nth-child(4) {
background: lightcoral;
}
.cursor {
display: none;
width: 100px;
height: 100px;
}
#heart {
background: no-repeat url("https://png.icons8.com/color/50/000000/hearts.png");
}
#diamond {
background: no-repeat url("https://png.icons8.com/color/50/000000/diamonds.png")
}
#spade {
background: no-repeat url("https://png.icons8.com/metro/50/000000/spades.png")
}
#clubs {
background: no-repeat url("https://png.icons8.com/ios/50/000000/clubs-filled.png")
}<div onmousemove="showCursor(event)" class="box">
<div id="diamond" class="cursor"></div>
</div>
<div onmouseenter="showCursor(event)" class="box">
<div id="heart" class="cursor"></div>
</div>
<div onmousemove="showCursor(event)" class="box">
<div id="spade" class="cursor"></div>
</div>
<div onmousemove="showCursor(event)" class="box">
<div id="clubs" class="cursor"></div>
</div>
功能showCursor()当用户的鼠标输入一个带有属性的框时调用onmouseenter="showCursor(event)"(请参阅上面的HTML标记)。
下面我提供了JavaScript代码附评论解释它是如何工作的：
const showCursor = function(event) {
// get the element object of the cursor of this box
let cursor = event.target.querySelector('.cursor');
// function that will be execute whenever the user moves inside the box
event.target.onmousemove = function(e) {
// the user is moving inside the box
// show the cursor element
cursor.style.display = 'block'
// calcultate the translate values of the cursor element
let [x, y] = [e.pageX - e.target.offsetLeft - 20, e.pageY - e.target.offsetTop - 20]
// apply these values to the style of the cursor element
cursor.style.transform = `translate(${x}px, ${y}px)`
}
// function that will be executed when the user leaves the box
event.target.onmouseleave = function(e) {
// the user's mouse left the box area
// hide the cursor element
cursor.style.display = 'none'
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/-100004905
复制相关文章
相似问题