Hidden Div Blinks On Hover When Shown

Question

I've seen similar questions, but I'm having trouble nailing this down.

I have a container div that has several divs inside it. When you hover over any of those divs, the rest of the divs lose opacity so you focus on the hovered div. Also, when you hover, a div appears on top of that active div to display text.

I have it all working, but when I hover over the div that appears on top that hold text...it freaks out...blinks?

Here is Fiddle for quick proof of concept: http://jsfiddle.net/zuhloobie/xy1Lu672/2/

I've heard that the display:none or block could be the culprit, but when I introduce opacity:0 or 1 it doesn't blink, but disappears if you hover over it. So I'm stuck between the two methods and could use some assistance if you don't mind. I just want the text divs to appear and not freak out if you accidentally mouseover it, but disappear after you hover off the div below it.

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 to handle text hovers

#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 to handle opacity hovers

$("#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);
});

Thanks in advance...

Answer 1

also add css style display:block for areatext which will fix the flickering

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

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