javascript - 如何在多次鼠标悬停时更改光标

Question

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

Answer 1

使用 CSS cursor属性(property)

如果不在 CSS 中使用任何伪选择器，您可以通过使用 cursor 来获得很好的结果。属性(property)。例如，您可以从 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 snippet> Run code snippet:

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> (如第二点所示)。