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 。

Answer 2

创建抖动效果是因为一旦显示叠加层，鼠标就会悬停在叠加层而不是原始层叠（＃div1）。您可以通过查看父元素是否悬停来解决此问题。

/* instead of #div1:hover + #div2, where .container is a class on the parent */
.container:hover #div2 {
    display: block;
}

http://jsfiddle.net/eRBCa/1/

Answer 3

您可以这样做：

http://jsfiddle.net/eRBCa/4/

HTML

<div>
    <div id="div1">
        <div class="content">
            content here
        </div>        
    </div>
</div>

CSS

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

#div1:hover{  background-color:red; }

#div1:hover .content {display:block; }
.content {display:none; position:absolute; top:0; left:0}

Answer 4

您应该先在html中调用操作一旦你悬停div1，div2就会出现在顶部，所以你将它悬停在div2上并且它们是相邻的 http://jsfiddle.net/GPCh3/

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

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

#call:hover   #div2{
    display: block;
}

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

FireFox - Blinky Hover Divs

4 个答案: