Is it possible to defer a cursor with a pointer to a CSS3 animation?
I have an image that (when hovered) grows (using CSS animation). The image is also a link to another page.
So, if the cursor goes to the "pointer", then the visitor will parry - it will look like an animation effect, and they may not understand it by the hyperlink.
(Now that it's 2014) there is an easy way for example. "delay-delay" to delay changing the cursor until the animation ends?
Thank.
source to share
Not sure if there is a way to do this with pure CSS, this solution includes jQuery.
Set cursor type in CSS
#image {
cursor: default; //default is the "arrow"
}
Then use jQuery to change the image on hover and change the pointer when the animation ends.
$("#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
source to share
You can use Javascript to detect the event transitionend
that fires when the hover ends.
The transition event occurs when the CSS transition is complete.
So, bind a listener to the element and change the cursor accordingly:
var element = document.getElementById("myDiv");
element.addEventListener("transitionend", function() {
element.style.cursor = "pointer";
}, false);
source to share
you can write pure CSS instead of JavaScript
CSS:
#image{
cursor: default;
transition: cursor 3s linear ;
}
#image:hover{
cursor: pointer;
}
actually CSS transitions are done for numeric styles
, but when you use them to change something like cursor (or text alignment, display, ...) it will suddenly change that property to the value you wrote in the middle of the duration
so if you set for example 3 seconds to do this, it will change your property correctly to 1.5 seconds
source to share