将鼠标悬停在链接上时对自定义光标进行动画处理 [英] Animate custom cursor when hovering on a link

问题描述

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

I have a custom image cursor for my body and links.

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

What I would like to achieve is hovering the link the cursor should transition into the link's cursor image, rather than it just changing straight away.

当前，我有以下代码:

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>上时，两个圆圈图标之间没有过渡.

As you can see above there is no transition between the two circle icons when hovering <a>.

我尝试使用CSS实现此目标，但没有成功. 如何使用JavaScript来实现?

I tried achieving this with CSS, but with no success. How can this be achieved using JavaScript?

推荐答案

这是您可以实现的一种方法:以下解决方案允许您具有自定义HTML游标，这些游标可以在悬停特定标签时从一种状态转换为另一种状态.

Here's a way you can achieve: the following solution allows you to have custom HTML cursors that can transition from one state to an another when hovering specific tags.

1. 首先创建我们的自定义HTML光标:

1. Let's first create our custom HTML cursor:

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

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

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

Then we need to make this element track the position of the actual 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);
 
});

* {
  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的初始属性(例如width和height).为了避免不必要地在mousemove上的光标中添加或删除类，我们可以检查两件事:

When #cursor will be hovering <a> we will add a class (.hoveredCursor) that will change #cursor's initial properties (e.g. width and height). In order to not unnecessarily add or remove a class to the cursor on mousemove we can check for two things:

1. 目标是<a>元素，可以使用jQuery的 .is 方法:

1. the target is a <a> element, can be checked with jQuery's .is method:

const isLinkTag = target.is('a');

#cursor是否具有类.hoveredCursor，即#cursor已经悬停了.使用方法 .hasClass :

whether or not #cursor has the class .hoveredCursor i.e. #cursor is already hovering. With the method .hasClass:

const isHovered = cursor.hasClass('hoveredCursor');

您可以将任何属性设置为.hoveredCursor，将鼠标悬停时会将其添加到#cursor的初始属性中(您可能需要使用!important覆盖样式)，例如:

You can set any property to .hoveredCursor, when hovering these will be added to #cursor's initial property (you might need to use !important to overwrite styles), for example:

.hoveredCursor {
  width: 10px !important;
  height: 10px !important;
}

然后设置#cursor的transition属性以使其平滑:

Then set the transition property of #cursor to make it smooth:

#cursor {
  transition: linear height 0.2s, linear width 0.2s;
} 

您可能遇到的一个问题是#cursor妨碍了event.target的作用，这意味着目标将是``#cursor . This results in some bad behaviour (#cursor`将在两种状态之间来回切换...)

one issue you might come across is having #cursor get in the way of the event.target meaning target will be ``#cursor. This results in some bad behaviour (#cursor` will be switching back and forth between the two states...)

将none设置为#cursor的pointer-events将解决此问题(该事件将简单地忽略#cursor).

Setting none to #cursor's pointer-events will solve that (the event will simply ignore #cursor).

---

这是最终代码:

---

Here is the final code:

$(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>

注意:我也向文档中添加了mouseenter和mouseleave，以便自定义光标相应地隐藏或显示.

Note: I have added a mouseenter and mouseleave to the document too so that the custom cursor hides or shows accordingly.

使用这种方法的优势在于，它允许您在任意给定元素的两组属性之间进行转换(通过标签-在这里是<a>-甚至是通过选择器).

The advantage of using such method is it allows you to transition between two sets of properties for any given elements (by tags - here <a> - or even by selector).

这篇关于将鼠标悬停在链接上时对自定义光标进行动画处理的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！