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/

编辑：这是最新的谷歌浏览器。此外，显然HIDING元素会导致光标更新。光标未更新的事实是否删除了谷歌浏览器中的错误？

$('#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

另一种解决方法是为第一个元素消失时显示的元素设置光标样式。

例如，我将此 fiddle 与四个块相互堆叠，因此您可以看到它们消失并在超时结束时重新堆叠。

如果将鼠标悬停在第二个框上，它将有一个pointer光标，并且在调用.remove()后，光标将更新为十字准线。这是因为鼠标现在悬停的元素具有cursor样式。

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

我会假设浏览器会自己将光标状态更新为inherit或default，但正如您所指出的那样，除非您使用{{1}，否则这似乎需要鼠标移动}}

的更新 的

OP的场景没有移动元素，只有一个被移除的div，以及它背后的父元素。要使鼠标在.hide()上使用父元素的cursor样式，我必须将父{Q}样式设置为函数的一部分：

.remove()

以下是容器解决方案的新提示：http://jsfiddle.net/mHdtU/22/

Answer 3

你可以做这样的事情

标记部分

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

的Javascript

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

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

通过CSS更改光标：悬停。无需鼠标移动即可从DOM中删除元素。更新鼠标光标？

3 个答案: