CODEWITHSUNDEEP
javascripthtmlcss
Sean Anderson
Sean Anderson

Reputation: 29271

Cursor is changed via CSS :hover. Element is removed from the DOM without mouse moving. Update mouse cursor?

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

Upvotes: 6

Views: 1748

Answers (3)

Dpeif
Dpeif

Reputation: 531

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/

Upvotes: 1

DJ.
DJ.

Reputation: 528

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.

Upvotes: 1

Suman Bogati
Suman Bogati

Reputation: 6349

You could do something like this

markup part

<div id="parElem">
<div id="element"></div>
</div>

Javascrpit

$('#element').hover(function(){
    setTimeout(function(){
        $(this).remove();
        $('#parElem').css('cursor', 'default');
    }.bind(this), 1000);
});

CSS as it is in your http://jsfiddle.net/mHdtU/.

Upvotes: 0

Related Questions