用鼠标隐藏jQuery hide + CSS hover问题

Question

有没有人注意到当你有CSS：悬停效果应用于一个元素时，隐藏该元素并保持鼠标完全静止，悬停效果仍然存在，直到鼠标移动？

我有一个搜索，但似乎找不到任何类似的其他线程。我知道这可能很容易，但我找不到解决方案，这将导致我最终进入Bedlam。

要明白我的意思，请看一下这个小提琴：http://jsfiddle.net/NsMKN/和

1. 点击黑框将其展开
2. 将光标移动到原始黑度之外，如红色X
3. 点击隐藏并保持鼠标光标完美
4. 注意黑匣子还是红色???

当光标移动时，：hover不会应用，但它有一种方法可以做到这一点，而不必移动鼠标，而不必自己使用jQuery应用悬停效果（将其留给CSS）？

更新：我已将Starx标记为答案，因为它似乎是一个IE浏览器。谢谢你的帮助。

Answer 1

让我分开你的代码。

<div class="tester">
    <div class="content">
        apple, banana, carrot, lettuce, celery, beetroot
    </div>
</div>

在这里，div .content位于.tester内，在一般情况下，它包含内部内容。

.tester:hover
{
   background-color:red; 
}

您的CSS也适用于同一个包装div，即.tester。因此，当鼠标到达此部分时，其背景颜色将会改变。

$('.tester').click(function () {
    $(this).children('.content').toggle();
});

现在，当您切换内部元素以使其可见时。 .tester的尺寸将根据内部元素而变化。虽然在你的情况下它是固定的，DOM也必须考虑它的孩子。尝试对此fiddle执行相同操作。

由于这个原因鼠标仍然超过div .tester。因此，.tester:hover的样式仍将应用。

现在，当您切换.content时，包装器div .tester将保留先前的状态，直到发生进一步的事件。

IE浏览器似乎在下一个事件发生之前不会更新其DOM属性。

Answer 2

这个问题对我来说没有发生。 但是，你可以试试这个： http://jsfiddle.net/NsMKN/1/

.tester
{
   width:100px;
   min-height:100px;
   background-color:Black;
}