隐藏 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;
}

fiddle - http://jsfiddle.net/victor_007/xy1Lu672/4/

隐藏 Div 悬停时显示时闪烁

Hidden Div Blinks On Hover When Shown

html

css

jquery

hover