jQuery 隐藏 + CSS 鼠标悬停问题

Question

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

我进行了搜索，但似乎无法找到任何其他类似主题。我知道这可能很容易，但我找不到解决方案，这会让我陷入困惑。

要了解我的意思，请看一下这个 Fiddle: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 属性，直到下一个事件发生。