jquery - jQuery hide + CSS 鼠标悬停问题

Question

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

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

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

当光标移动时， :hover 没有按应有的方式应用，但是有一种方法可以做到这一点，而无需移动鼠标，也不必自己使用 jQuery 应用悬停效果（将其留给 CSS）？

更新：我已将 Starx 标记为答案，因为它似乎是 IE 的东西。谢谢你们的帮助。

太棒了

score 0 · Accepted Answer

让我拆分你的代码。

<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 属性。

score -1 · Accepted Answer

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

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

2 回答 2