Question

我有一个图像（当盘旋时）放大（使用CSS动画）。该图像也是指向另一页的链接。

因此，如果光标指向＆＃39;指针＆＃39;访问者立即徘徊 - 看起来它只是动画效果 - 他们可能没有意识到它是一个超链接。

（现在它已经是2014年）有一个简单的方法，例如＆＃39;过渡延迟＆＃39;延迟光标更改，直到动画结束？

感谢。

Answer 1

不确定是否有办法使用纯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 Demo

Answer 2

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

MDN transitionend docs州：

当CSS转换完成时会触发transitionend事件。

因此，将侦听器绑定到元素，并相应地更改游标：

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

Answer 3

您可以使用JavaScript编写纯CSS CSS：

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

实际上CSS转换是针对数字样式进行的，但是当您使用它们来更改像光标（或文本对齐，显示，...）之类的内容时，它会突然改变该属性在你持续时间的中间你写的价值因此，如果你设置3秒的时间，那么它将在1.5秒内正确地改变你的属性

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;
}

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

4 个答案:

JS Fiddle Demo