Question

I have a background div and a foreground div which fades in as the background is moused over, and fades out when the background is mousd out.

But when the foreground fades in, it steals focus from the background and the tooltip ends up “flashing”:

http://jsfiddle.net/ts97t/

How do I keep the tooltip visible and stop the flashing?

Thanks

Answer 1

Mouse over me.
This needs to stay visible, and not flash, until I mouse out of the green square!

JQUERY

$("#background").hover(function(){
 $("#tooltip").fadeIn();
},function(){
    $("#tooltip").fadeOut();
   });​

and if you want #tooltip overlaps the “Mouse over me” text.

#tooltip {
    display: none;
    width: 130px;
    height: 130px;
    background: red;
    top:0;
}

DEMO

second way

   var i=0;
$("#background").hover(function(){
     $("#tooltip").fadeIn();
    },function(){
        if (i==1) {
            $("#tooltip").fadeOut();
i=0;
        } 
    });

$('#tooltip').hover('',function(){
  i=1;

});

HTML

<div id="background">Mouse over me.</div>
<div id="tooltip">This needs to stay visible, and not flash, until I mouse out of the green square!</div>

DEMO 2