显示时，隐藏的 div 会在悬停时闪烁

Question

我看到过类似的问题，但我无法确定这一点。

我有一个容器 div，里面有几个 div。当您将鼠标悬停在任何这些 div 上时，其余 div 将失去不透明度，因此您将注意力集中在悬停的 div 上。此外，当您悬停时，一个 div 会出现在该活动 div 的顶部以显示文本。

我一切正常，但是当我将鼠标悬停在顶部显示的包含文本的 div 上时...它吓坏了...闪烁？

这是用于快速验证概念的 Fiddle：http://jsfiddle.net/zuhloobie/xy1Lu672/2/

我听说display:none 或block 可能是罪魁祸首，但当我介绍opacity:0 或1 时，它不会闪烁，但如果将鼠标悬停在它上面就会消失。因此，我在这两种方法之间陷入困境，如果您不介意，可以使用一些帮助。我只是希望文本 div 出现，如果你不小心将鼠标悬停在它上面时不会吓到，但在你将鼠标悬停在它下面的 div 上之后就会消失。

HTML

<div id="main">
    <div id="areaOne">
    </div>
    <div id="areaOneText">ONE
    </div>
    <div id="areaTwo">
    </div>
    <div id="areaTwoText">TWO
    </div>
    <div id="areaThreeFour">
        <div id="areaThree">
        </div>
        <div id="areaThreeText">THREE
        </div>
        <div id="areaFour">
        </div>
        <div id="areaFourText">FOUR
        </div>
    </div>
</div>

CSS 处理文本悬停

#main {width:600px; margin:auto 0; height:400px; border:2px solid #F00;}
#areaOne {width:200px; height:400px; float:left; cursor:pointer; background-image:url(http://www.shynemedia.com/dev/ikuw/dog-left.jpg);}
#areaTwo {width:200px; height:400px; float:left; cursor:pointer; background-image:url(http://www.shynemedia.com/dev/ikuw/dog-center.jpg);}
#areaThreeFour {width:200px; height:400px; float:left;}
#areaThree {width:200px; height:200px; cursor:pointer; background-image:url(http://www.shynemedia.com/dev/ikuw/dog-top-right.jpg);}
#areaFour {width:200px; height:200px; cursor:pointer; background-image:url(http://www.shynemedia.com/dev/ikuw/dog-bottom-right.jpg);}
#areaOne:hover + #areaOneText, #areaTwo:hover + #areaTwoText, #areaThree:hover + #areaThreeText, #areaFour:hover + #areaFourText {display:block;}
#areaOneText {position:absolute; top:40px; left:50px; width:100px; text-align:center; background:#E7A61A; display:none; padding:10px; z-index:100;}
#areaTwoText {position:absolute; top:40px; left:250px; width:100px; text-align:center; background:#E7A61A; display:none; padding:10px; z-index:100;}
#areaThreeText {position:absolute; top:40px; left:450px; width:100px; text-align:center; background:#E7A61A; display:none; padding:10px; z-index:100;}
#areaFourText {position:absolute; top:240px; left:450px; width:100px; text-align:center; background:#E7A61A; display:none; padding:10px; z-index:100;}

jquery 处理不透明度悬停

$("#areaOne").mouseover(function() {
    $("#areaTwo, #areaThree, #areaFour").stop().fadeTo("slow", .2);
}).mouseout(function() {
    $("#areaTwo, #areaThree, #areaFour").stop().fadeTo("slow", 1);
});

$("#areaTwo").mouseover(function() {
    $("#areaOne, #areaThree, #areaFour").stop().fadeTo("slow", .2);
}).mouseout(function() {
    $("#areaOne, #areaThree, #areaFour").stop().fadeTo("slow", 1);
});

$("#areaThree").mouseover(function() {
    $("#areaOne, #areaTwo, #areaFour").stop().fadeTo("slow", .2);
}).mouseout(function() {
    $("#areaOne, #areaTwo, #areaFour").stop().fadeTo("slow", 1);
});

$("#areaFour").mouseover(function() {
    $("#areaOne, #areaTwo, #areaThree").stop().fadeTo("slow", .2);
}).mouseout(function() {
    $("#areaOne, #areaTwo, #areaThree").stop().fadeTo("slow", 1);
});

提前谢谢...

Answer 1

还为areatext 添加css样式display:block，这将解决闪烁问题

#areaThreeText:hover, 
#areaFourText:hover,
#areaTwoText:hover, 
#areaOneText:hover {
    display:block;
}

小提琴 - http://jsfiddle.net/victor_007/xy1Lu672/4/