CSS3动画可以延迟将光标变为指针吗？

Question

我有一张图片，当鼠标悬停在上面时，会通过CSS动画放大。该图片还是指向另一个页面的链接。

因此，如果光标在访问者悬停时立即变成“指针”，它看起来就像是动画效果，他们可能没有意识到这是一个超链接。

（现在已经是2014年了）是否有一种简单的方法，例如使用“transition-delay”来延迟光标更改直到动画结束？

谢谢。

- user801347

Answer 1

你可以使用Javascript来检测当你的悬停过渡效果结束时触发的transitionend事件。 MDN transitionend文档中说明：

当CSS过渡完成时，将触发transitionend事件。

因此，将监听器绑定到元素上，并相应地更改光标。

var element = document.getElementById("myDiv");
element.addEventListener("transitionend", function() {
    element.style.cursor = "pointer";
}, false);

- LcSalazar

---

这种方法更加可靠。 - Zach Saucier

如果您想要过渡的唯一CSS属性是“cursor”，则必须使用虚拟过渡属性和值，即在视觉上不起作用的东西。如果您的过渡属性是“cursor”，它将像下面这个答案中所述那样行事，在过渡时间的一半切换到新光标，而不是在“transitionend”时切换。 - Sideways S

Answer 2

不确定是否有纯CSS的解决方案，本解决方案使用jQuery。

在CSS中设置光标类型

#image {
    cursor: default; //default is the "arrow"
}

然后使用jQuery在鼠标悬停时修改图像，并在动画完成后更改指针。

$("#image").hover(function(){
    $(this).animate({
        "width": 200,
        "height": 200,
     }, 1500 );   
     setTimeout(pointer, 1500);
});

function pointer() {
    $("#image").css('cursor', 'pointer'); //pointer is the "hand"
}

JS Fiddle 演示

- Dan

---

好的解决方案！我建议将$("#image").css('cursor', 'pointer');（不带超时）放在animate()的[complete]参数（http://api.jquery.com/animate/）中，并在hover的handlerOut参数（http://api.jquery.com/hover/）中可能反转动画/光标。修正了你的fiddle @ http://jsfiddle.net/8ppxroLm/4/ - Don Boots

@DonBoots 非常感谢您的建议，但需要注意的一点是，如果用户在您的代码示例中多次悬停和取消悬停，他们将不得不等待动画完成，这可能需要一些时间。 - Dan

Answer 3

你可以使用纯CSS代替JavaScript
CSS:

#image{
     cursor: default;
     transition: cursor 3s linear ;
}
#image:hover{
     cursor: pointer;
}

实际上，CSS过渡是用于数字样式的
但当您使用它们来更改像光标（或text-align、display等）这样的东西时，它将突然将该属性更改为您编写的值，在持续时间的中间
因此，如果您设置了3秒的时间来执行此操作，它将在1.5秒时正确更改您的属性

- mk rowling

---

有趣。但是依赖于这种意外副作用通常是一种不好的做法。由于这种行为没有在规范中指定，浏览器可能会改变它们的实现方式，导致你的代码出现问题。 - ivanjonas

这确实是一种诱人的方法。无论我是否实现它，答案都提供了有关浏览器实际实现方式的有用信息。因此，我会点赞它。 - Sideways S

这在谷歌浏览器上不再起作用了 - 不过您可以利用动画关键帧来在特定位置设置光标。 - Pyro

Answer 4

这个对我有效。我使用了jQuery和setTimeout，在8毫秒后应用了一个css类。

JavaScript：

  var timeoutRef; 
  var mySpan = $("span");
    
  mySpan.on("mouseover", function () {
      timeoutRef = setTimeout(function () {
        mySpan.addClass("help");
      }, 800);
    })
    .on("mouseout", function () {
      clearTimeout(timeoutRef);
      mySpan.removeClass("help");
    });

然后是 CSS 类：

span.help {
  cursor: help;
}

- ScottyG