隐藏潜水显示时悬停时闪烁

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/