6

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);
});
Sean Anderson
  • 27,963
  • 30
  • 126
  • 237

3 Answers3

1

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.

DJ.
  • 528
  • 7
  • 16
  • I know this could be overkill, but you can use $(this).remove(); $(this).hide(); – DJ. Jan 22 '14 at 17:24
  • Yeah. You have to call remove in a setTimeout because if you rip the element out before hide finishes propagating then the cursor still doesn't update. I updated my question to reflect this. I'll accept if there's no more information in an hour or two, but would be nice to know why this is happening. – Sean Anderson Jan 22 '14 at 17:25
1

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/

Dpeif
  • 532
  • 1
  • 6
  • 18
  • This works if other elements shift around, but not if I apply the CSS to the parent element, unfortunately. So, if I am removing the last item in the list -- this won't work. – Sean Anderson Jan 22 '14 at 19:21
  • @SeanAnderson just updated with that scenario, hope that helps! – Dpeif Jan 22 '14 at 20:01
0

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/.

Suman Bogati
  • 6,289
  • 1
  • 23
  • 34