Question

我有一个用于body和链接的自定义图像光标。

我想要实现的是将光标悬停在链接上，而光标应该过渡到链接的光标图像中，而不是立即改变。

当前，我有以下代码：

html {
  height:100%;
}
body {
  cursor:url(https://i.imgur.com/odlAwsz.png), auto  !important;
  width:100%;
  height:100%;
  background:red;
}

a {
  cursor:url(https://i.imgur.com/yxX4Snm.png), auto !important;
}

<a href="#">I'm a link</a>

正如您在上方看到的那样，当悬停<a>时，两个圆圈图标之间没有过渡。

我尝试使用CSS实现这一目标，但没有成功。 如何使用JavaScript来实现？

Answer 1

这是您可以实现的一种方法：以下解决方案可让您拥有自定义HTML游标，当您将鼠标悬停在特定标签上时，这些游标可以从一种状态转换为另一种状态。

首先创建我们的自定义HTML光标：

#cursor {
  width: 20px;
  height: 20px;
  position: absolute;
  top: 0;
  left: 0;
  background: blue;
  border-radius: 10px;
}

<div id="cursor"></div>

然后，我们需要使此元素跟踪实际光标的位置：

$(document).mousemove(function(e) {

  const cursor = $('#cursor');
  const target = $(event.target);
  
  // update position of cursor
  cursor.css('left', e.clientX-10).css('top', e.clientY-10);
 
});

* {
  cursor: none;
}

#cursor {
  width: 20px;
  height: 20px;
  position: absolute;
  top: 0;
  left: 0;
  background: blue;
  border-radius: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="cursor"></div>

当#cursor悬停在<a>上时，我们将添加一个类（.hoveredCursor），该类将更改#cursor的初始属性（例如{{1} }和width）。为了避免在height上的游标中不必要地添加或删除类，我们可以检查两件事：
1. 目标是mousemove元素，可以使用jQuery的.is方法进行检查：
```
<a>
```
2. const isLinkTag = target.is('a');是否具有类#cursor，即.hoveredCursor已经悬停了。使用方法.hasClass：
```
#cursor
```
您可以将任何属性设置为const isHovered = cursor.hasClass('hoveredCursor');，将它们悬停在.hoveredCursor的初始属性中（您可能需要使用#cursor来覆盖样式），例如：
```
!important
```
然后设置.hoveredCursor { width: 10px !important; height: 10px !important; }的{{1}}属性以使其顺畅：
```
transition
```
您可能遇到的一个问题是，#cursor成为#cursor { transition: linear height 0.2s, linear width 0.2s; }的障碍，这意味着目标将是“ #cursor #cursor＃cursor`将切换回在两个州之间来回...）

将event.target设置为. This results in some bad behaviour (的{{1}}将解决此问题（事件将简单地忽略none）。
< / li>

这是最终代码：

#cursor

pointer-events

#cursor

注意：我也向文档中添加了$(document).mousemove(function(e) { const cursor = $('#cursor'); const target = $(event.target); // update position of cursor cursor.css('left', e.clientX-10).css('top', e.clientY-10); const isLinkTag = target.is('a'); const isHovered = cursor.hasClass('hoveredCursor'); // toggle the cursor class if necessary if(isLinkTag && !isHovered) { cursor.addClass('hoveredCursor'); } else if(!isLinkTag && isHovered) { cursor.removeClass('hoveredCursor'); } }); $(document).mouseleave(function(e) { const cursor = $('#cursor'); cursor.hide() }); $(document).mouseenter(function(e) { const cursor = $('#cursor'); cursor.show() });和* { cursor: none; } #cursor { pointer-events: none; width: 20px; height: 20px; position: absolute; top: 0; left: 0; display: none; background: blue; border-radius: 10px; transition: linear height 0.2s, linear width 0.2s; } .hoveredCursor { width: 10px !important; height: 10px !important; } a { font-size: 20px; }，以便自定义光标相应地隐藏或显示。

使用这种方法的优点是，它允许您在任意给定元素的两组属性之间进行转换（通过标签-在这里<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="cursor"></div> <a href="#">This is a link</a>-甚至通过选择器）。 >

悬停在链接上时对自定义光标进行动画处理

1 个答案: