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

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 属性中的URL 来更改图像位置相对于实际鼠标位置的原点：

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

---

使用 JavaScript

当然，您可以使用 JavaScript 代码处理此功能。为了实现这一目标，我们需要做以下几件事：

• 用你想要的光标图像作为背景创建一个 HTML 元素

• 使用onmouseenter、onmousemove 和onmouseleave 事件

• 获取鼠标在页面上的位置：属性pageX,pageY

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

我还使用了其他几个技巧来使其正确：例如将框的溢出设置为hidden，以便在框外看不到cursor 元素。另外，监听onmouseleave事件可以让我们在鼠标在框区域外时隐藏cursor元素。

我这里做了一个小demo，点击Show code sn-p > Run code sn-p：

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>

当用户的鼠标进入具有onmouseenter="showCursor(event)" 属性的框之一时调用函数showCursor()（参见上面的HTML 标记）。

下面我提供了 JavaScript 代码 与 cmets 解释它是如何工作的：

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>（如第二点所示）。