我试图将光标更改为不同的图像,具体取决于它在我的横幅内盘旋的对象。目前,我只知道如何在CSS中更改光标样式。但游标始终保持不变。如何替换javascript中鼠标上方的光标图像?我只使用jQuery和TweenMax,因为这是一个任务。
发布于 2018-06-14 13:59:17
cursor
财产如果不使用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代码处理这个特性。以下是我们实现这一目标所需要的几点:
我还使用了其他一些技巧来使其正确:例如,将这些框的溢出设置为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'
}
}
https://stackoverflow.com/questions/-100004905
复制相似问题