jQuery隐藏+ CSS鼠标悬停问题

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

我已经有一个搜索，但似乎无法找到任何其他线程相似。我知道这可能很容易，但我找不到解决方案，它会导致我最终在Bedlam。

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

当光标移动时，hover未按原样应用，但它有一种方法可以在不移动鼠标的情况下执行此操作，也无需使用jQuery自己应用悬停效果（将它留给CSS）？

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

awesome piccy

我无法在Chrome 21.0.1180.15开发时，Safari 5.1.7或Firefox 12.0，都在OS X上它在IE9发生，虽然看到了这个。 – ThinkingStiff 2012-07-15 06:07:47

'：）'不清楚你所需要的，但是 - 如果你不想要申请的jQuery CSS效果，然后jQuery是如何标记的这个问题，但看看这就够了，你需要:) http://jsfiddle.net/2C9vh/希望它有助于 – 2012-07-15 06:10:05

没有看到在火狐13要么但是，是它可以在IE 8 – Starx 2012-07-15 06:10:51

让我分开你的代码。

<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时，包装分区.tester将保留先前的状态，直到进一步发生事件。

像IE这样的浏览器似乎没有更新其DOM属性，直到发生下一个事件。

2012-07-15 06:18:43 Starx

-1

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

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

2012-07-15 06:10:04 AdityaSaxena

好吧我不知道为什么负面评级:)但是我想在这里做的是设置容器的最小高度为100px。这样，100px高度不会影响内容的500px高度。尽管欢呼谁给了负面评价！ – AdityaSaxena 2012-07-15 06:16:32

我没有downvoted，但问题似乎是关于浏览器问题，而不是编码错误。 – Starx 2012-07-15 06:21:16

回答