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

时间:2012-07-15 05:58:33

标签: jquery css hover refresh mouse

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

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

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

  1. 点击黑框将其展开
  2. 将光标移动到原始黑度之外,如红色X
  3. 点击隐藏并保持鼠标光标完美
  4. 注意黑匣子还是红色???
  5. 当光标移动时,:hover不会应用,但它有一种方法可以做到这一点,而不必移动鼠标,而不必自己使用jQuery应用悬停效果(将其留给CSS)?

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

    awesome piccy

2 个答案:

答案 0 :(得分:0)

让我分开你的代码。

<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执行相同操作。

Example Showing the Issue

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

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

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

答案 1 :(得分:-1)

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

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