光標通過CSS：hover更改。 無需移動鼠標即可從DOM中刪除元素。 更新鼠標光標？

Question

我有一個動態創建的HTML元素。 它具有一些CSS和HTML：

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

#element{
    height: 200px;
    width: 200px;
    background-color: blue;
}

#element:hover{
    cursor: pointer;
}

然后將其以編程方式從頁面上移除，而鼠標仍位於元素上方。

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

這使光標看起來像指針，直到鼠標移動為止。 在仍然使用CSS懸停的同時，有什么方法可以解決此問題？

這是一個小提琴： http : //jsfiddle.net/mHdtU/

編輯：這是最新的Google Chrome瀏覽器。 同樣，顯然HIDING該元素會使光標更新。 光標沒有更新的事實是否消除了Google Chrome中的錯誤？

$('#element').hover(function(){
    setTimeout(function(){
        $(this).hide();
        setTimeout($(this).remove.bind(this));
    }.bind(this), 1000);
});

Answer 1

不確定是否適合您，但可以使用

$(this).hide();

插入.remove（）以使指針返回到箭頭。

在您回答的編輯之后：

$('#element').hover(function(){
    setTimeout(function(){
        $(this).hide(0,function(){$(this).remove.bind(this)});
    }.bind(this), 1000);
});

這樣，您就可以等到隱藏動畫完成為止。

Answer 2

另一個解決方法是為第一個元素消失后顯示的元素設置光標樣式。

例如，我用四個堆疊在一起的小提琴制作了這個小提琴 ，所以您可以看到它們消失了，並在超時結束時重新堆疊。

如果將鼠標懸停在第二個框上，它將有一個pointer光標，並且在調用.remove()之后，光標將更新為十字准線。 這是因為鼠標現在懸停在其上的元素具有cursor樣式。

#element2:hover {
    cursor: pointer;
}
#element3:hover {
    cursor: crosshair;
}

我本來以為瀏覽器會自行更新光標狀態以inherit或default狀態，但是正如您已經指出的那樣，除非您使用.hide()否則這似乎需要移動鼠標。

更新

OP的場景中沒有平移元素，只是刪除了一個div，並在其后面添加了父元素。 為了使鼠標在.remove()上使用父元素的cursor樣式，我必須將父元素的cursor樣式設置為函數的一部分：

setTimeout(function () {
    $(this).parent()
           .css({'cursor':'default'}), 
    $(this).remove();
}.bind(this), 1000);

這是容器解決方案的新提琴： http : //jsfiddle.net/mHdtU/22/

Answer 3

你可以做這樣的事情

標記部分

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

Java腳本

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

您的http://jsfiddle.net/mHdtU/中的 CSS。