0

所以在 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;
}
4

4 回答 4

4

看起来（不涉及太多技术细节），:hover选择器在 Chrome 中的工作方式与在 Firefox 或 IE 中的工作方式不同。也就是说，当#div2它变得可见时，它成为“悬停”元素并#div1失去“悬停”“属性”（在 FF 或 IE 中）。这就是导致闪烁的原因。

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

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

另请参阅这个简短的演示。

于 2013-06-10T11:31:06.820 回答
1

创建抖动效果是因为一旦显示叠加层，您的鼠标现在将悬停在叠加层而不是原始 (#div1) 上。您可以通过查看父元素是否悬停来解决此问题。

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

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

于 2013-06-10T11:30:59.427 回答
0

你可以这样做：

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}
于 2013-06-10T11:34:36.813 回答
0

您应该在 html 中更早地调用 action。
一旦你悬停 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;
}
于 2013-06-10T11:38:29.957 回答