1

I'm trying to make a div follow the mouse, but only while the mouse is inside of another div. I've made some progress, but when the div that follows the mouse is revealed, the mouseout event is triggered causing it to disappear again. Then, the mousemove event causes it to show up and it repeated in an infinite loop. How can this loop be avoided?

HTML

<div class="navbar" rel="#box1">Link</div>
<div class="box" id="box1" align="center"></div>

Javascript

$(document).ready(function(){
    $(".navbar").mousemove(function(e){         
        $($(this).attr('rel')).show();       
        $(".box").css({             
            top: -80 + "px",             
            left: (e.pageX - 300) + "px"        
        });    
    });     
    $(".navbar").mouseout(function(e){         
        $($(this).attr('rel')).hide();   
    });
});​

CSS

.navbar{
width: 90%;
height: 200px;
border: 1px solid #f00;
margin: 50px auto 0 auto;
display: block;
}
.box{
    width: 616px;
    height: 474px;
    background: url(http://i.imgur.com/4fV4o.png);
    float: left;
    vertical-align: top;
    display: none;
    position: absolute;
}
Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
user1693154
  • 11
  • 1
  • 1
  • 1
    try adding the attribute `pointer-events: none` to the div that follows. Note that this is not supported by all browsers. More info - https://developer.mozilla.org/en-US/docs/CSS/pointer-events – Austin Brunkhorst Sep 24 '12 at 00:47
  • 1
    Thanks, I didn't even know about the pointer-events CSS property. If anyone is looking for an IE alternative [http://stackoverflow.com/questions/3680429/click-through-a-div-to-underlying-elements](http://stackoverflow.com/questions/3680429/click-through-a-div-to-underlying-elements) – user1693154 Sep 25 '12 at 01:29

0 Answers0