如何在多个鼠标悬停上更改光标

Question

我正在尝试将光标更改为不同的图像，具体取决于它悬停在我的横幅内的对象。目前我只知道在CSS中更改光标样式。但光标始终保持不变。如何在我的javascript中替换鼠标悬停时的光标图像？我只使用jQuery和TweenMax，因为这是一项任务。

Answer 1

使用CSS cursor属性

在CSS中不使用任何伪选择器，通过使用cursor属性可以获得相当不错的结果。例如，您可以从available ones范围中选择一种光标样式。甚至可以通过链接图标的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位置以及cursor属性中的网址来更改图片相对于实际鼠标位置的位置原点：

cursor: url(<URL>) [x y|auto];

使用JavaScript

当然，您可以使用JavaScript代码处理此功能。以下是我们需要实现的一些事项：

• 创建一个HTML元素，其中包含您想要作为背景的光标图像

• 使用onmouseenter，onmousemove和onmouseleave事件

• 获取鼠标在页面上的位置：properties pageX，pageY

• 将cursor元素的位置设置为鼠标位置（实际鼠标指针将被隐藏）：使用transform CSS属性。

  < / LI>

我还有其他一些技巧可以使它正确使用：例如，将框的溢出设置为hidden，以便无法在框外看到cursor元素。此外，当鼠标位于框区域外时，收听onmouseleave事件可以隐藏cursor元素。

我在这里做了一个小演示，点击显示代码段＆gt; 运行代码段：

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'
  }

}

使用<svg>元素

前段时间，我在鼠标的how to add an <svg> element as the cursor上回复了帖子。虽然它有点先进。它仍然是一个JavaScript解决方案，但它涉及使用<svg>元素作为cursor，而不是简单的<div>（如第二点所示）。