html - FireFox - Blinky Hover Div

Question

所以在 FireFox/IE 中，出于某种原因，我的悬停一直在闪烁，我不太清楚为什么。是在 javascript 中进行悬停更好，还是在 CSS 中有更简单的修复方法？这是一个 JSFiddle 来展示我的意思 - http://jsfiddle.net/eRBCa/

HTML

<div>
    <div id="div1"></div>
    <div id="div2">Test Div</div>
</div>

CSS

#div1{
    width: 300px;
    height: 275px;
    background-color: yellow;
}

#div1:hover  + #div2{
    display: block;
}

#div2{
    background-color: grey;
    width: 300px;
    height: 275px;
    margin-top: -275px;
    opacity: .9;
    display: none;
}

Answer 1

似乎(没有深入了解太多技术细节):hover 选择器在 Chrome 中的工作方式与在 Firefox 或 IE 中不同。也就是说，当 #div2 可见时，它变成了“悬停”元素，而 #div1 失去了“悬停”“属性”(在 FF 或 IE 中)。这就是导致闪烁的原因。

你可以通过像这样改变你的 CSS 来解决这个问题:

#div1:hover + #div2, 
#div2:hover {
display: block;
}

另请参阅此 short demo .