jQuery隐藏+ CSS鼠标悬停问题

Question

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

我已经搜索过了，但似乎找不到其他类似的线程。我知道这可能很容易，但我找不到解决办法，这会使我最终进入疯人院。

为了明白我的意思，看看这个Fiddle：http://jsfiddle.net/NsMKN/和

1. 单击黑匣子展开它。
2. 将光标移出原来的黑度，如红色X所在的位置。
3. 单击以隐藏和保持鼠标光标完全静止。
4. 注意黑匣子仍然是红色的？

当光标移动时，不会按其应有的方式应用:悬停，但是它有一种方法可以做到这一点，而无需移动鼠标，也不必自己使用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也必须考虑它的子元素。试着对这个小提琴做同样的事情。

​

​

由于这个原因，鼠标仍将位于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;
}