jQuery隐藏+ CSS鼠标悬停问题
还有其他人注意到,当您将CSS:悬停效果应用于元素时,隐藏该元素并保持鼠标完全静止,悬停效果仍然存在,直到鼠标移动?jQuery隐藏+ CSS鼠标悬停问题
我已经有一个搜索,但似乎无法找到任何其他线程相似。我知道这可能很容易,但我找不到解决方案,它会导致我最终在Bedlam。
要明白我的意思,看看这个小提琴:http://jsfiddle.net/NsMKN/和
- 单击黑盒子将其展开
- 移动原来黑暗等,其中红色的X是 外光标
- 点击隐藏并保持鼠标光标PERFECTLY仍然
- 通知黑盒仍然是红色?
当光标移动时,hover未按原样应用,但它有一种方法可以在不移动鼠标的情况下执行此操作,也无需使用jQuery自己应用悬停效果(将它留给CSS)?
更新:我将Starx标记为答案,因为它似乎是IE浏览器。谢谢你们的帮助。
让我分开你的代码。
<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
时,包装分区.tester
将保留先前的状态,直到进一步发生事件。
像IE这样的浏览器似乎没有更新其DOM属性,直到发生下一个事件。
这个问题没有发生我。 但是,你可以试试这个: http://jsfiddle.net/NsMKN/1/
.tester
{
width:100px;
min-height:100px;
background-color:Black;
}
好吧我不知道为什么负面评级:)但是我想在这里做的是设置容器的最小高度为100px。 这样,100px高度不会影响内容的500px高度。尽管欢呼谁给了负面评价! – AdityaSaxena 2012-07-15 06:16:32
我没有downvoted,但问题似乎是关于浏览器问题,而不是编码错误。 – Starx 2012-07-15 06:21:16
我无法在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