I've got a dynamically created HTML element. It has some CSS and HTML:
<div id="element"></div>
#element{
height: 200px;
width: 200px;
background-color: blue;
}
#element:hover{
cursor: pointer;
}
and it is then removed from the page programmatically while the mouse is still over the element.
$('#element').hover(function(){
setTimeout(function(){
$(this).remove();
}.bind(this), 1000);
});
This leaves the cursor looking like a pointer until the mouse moves. Is there any way to fix that while still using CSS hover?
Here's a fiddle: http://jsfiddle.net/mHdtU/
EDIT: This is in the latest Google Chrome. Also, apparently HIDING the element causes the cursor to update. Is the fact that the cursor not updating on remove a bug in Google Chrome?
$('#element').hover(function(){
setTimeout(function(){
$(this).hide();
setTimeout($(this).remove.bind(this));
}.bind(this), 1000);
});
Not sure if it fits you, but you can use
$(this).hide();
insted of .remove() to get the pointer back to an arrow.
Following you answer's edit:
$('#element').hover(function(){
setTimeout(function(){
$(this).hide(0,function(){$(this).remove.bind(this)});
}.bind(this), 1000);
});
This way, you wait until the hide animation completes.
Another workaround is to set a cursor style for the element that is revealed when the first element disappears.
For example, i made this fiddle with four blocks stacked on each other, so you can see them disappear and re-stack when the timeout finishes.
If you hover over the 2nd box, it will have a pointer
cursor, and after .remove()
is called, the cursor updates to a crosshair. This is because the element that the mouse is now hovering over has a cursor
style.
#element2:hover {
cursor: pointer;
}
#element3:hover {
cursor: crosshair;
}
I would've assumed the browser would update the cursor state to inherit
or default
on its own, but as you've noted, that seems to require mouse movement unless you use .hide()
Updated
OP's scenario did not have shifting elements, just a div that was removed, and a parent element behind it. To make the mouse use the cursor
style of the parent element upon .remove()
, I had to set the parent's cursor
style as part of the function:
setTimeout(function () {
$(this).parent()
.css({'cursor':'default'}),
$(this).remove();
}.bind(this), 1000);
Here's a new fiddle with the container solution: http://jsfiddle.net/mHdtU/22/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With