Question

我见过类似的问题，但是我无法解决这个问题。

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

我已经完成了所有工作，但是当我将鼠标悬停在顶部显示文字的div上时......它吓坏了......眨眼间？

这是小提琴，用于快速证明概念：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

还为display:block添加css样式areatext，这将修复闪烁的

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

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

隐藏的Div在显示时悬停在悬停上

1 个答案: