html - 可以使用 CSS3 动画延迟光标更改为指针吗？

Question

我有一张图片(悬停时)会放大(使用 CSS 动画)。 该图像也是另一个页面的链接。

因此，如果光标立即转到“指针”，访问者就会悬停 - 看起来这只是动画效果 - 他们可能不会意识到这是一个超链接。

(现在是 2014 年了)是否有一种简单的方法，例如'transition-delay' 延迟光标更改直到动画结束？

谢谢。

Answer 1

您可以使用 Javascript 检测悬停过渡结束时触发的 transitionend 事件。

MDN transitionend docs状态:

The transitionend event is fired when a CSS transition has completed.

因此，将监听器绑定(bind)到元素，并相应地更改光标:

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