jQuery - mouseleave/mouseenter doesn't trigger when moving directly between divs; must enter body first

Question

I am working with a few divs with no margins/space between them, and I am having trouble getting the mouseleave/enter events to trigger after the first entry of the mouse.

In other words, I want the events to trigger without having to either A) move the mouse back to the body of the page, or B) make margins in between each div to that the mouse has a chance to go over the body before entering a new div.

All that is happening is I am switching the background image of the targeted div and having a child div slideDown which will eventually have text/links on it.

jQuery:

$('body').mouseenter(function(event) {

    var invisible = $(event.target).children('.info').is(':hidden');
    var goDown = $(event.target).children('.info').slideDown(125);

    if( $(event.target).is('#cube1') && invisible) {
       goDown;
       $(event.target).css('background', 'url(images/waves.jpg)');
    } 
    else if ( $(event.target).is('#cube2') && invisible) {
       goDown;
       $(event.target).css('background', 'url(images/amazon.jpg)');
    } 
    else if ( $(event.target).is('#cube3') && invisible) {
       goDown;
       $(event.target).css('background', 'url(images/lava.jpg)');
    }
    else if ( $(event.target).is('#cube4') && invisible) {
       goDown;
       $(event.target).css('background', 'url(images/everest.jpg)');
    } 
    else {

    }
});

$('body').mouseleave(function(event) {

    var visible = $(event.target).children('.info').is(':visible');
    var goUp = $(event.target).children('.info').slideUp(125);

    if( $(event.target).is('#cube1') && visible) {
       goUp;
       $(event.target).css('background', 'url(images/wavesBW.jpg)');   
    } 
    else if ( $(event.target).is('#cube2') && visible) {
       goUp;
       $(event.target).css('background', 'url(images/amazonBW.jpg)');
    } 
    else if ( $(event.target).is('#cube3') && visible) {
       goUp;
       $(event.target).css('background', 'url(images/lavaBW.jpg)');
    }
    else if ( $(event.target).is('#cube4') && visible) {
       goUp;
       $(event.target).css('background', 'url(images/everestBW.jpg)');
    } 
    else {

    }
});

CSS:

    .cube {
    background-color:#333;
    height:175px;
    width:175px;
    border:2px solid #999;  
    float:left;
    margin:0 0 0 0;
}

.info {
    background-color:#CCC;
    border-bottom:4px solid #999;
    position:relative;
    width:175px;
    height:50px;
    display:none;
    opacity:0.85;
}

HTML:

<body>
<div class="cube" id="cube1">
    <div class="info">
    </div>
</div>

<div class="cube" id="cube2">
    <div class="info">
    </div>
</div>

<div class="cube" id="cube3">
    <div class="info">
    </div>
</div>

<div class="cube" id="cube4">
    <div class="info">
    </div>
</div>
</body>

Who told you it was great idea to bind all your events to the body ? — adeneo, Jun 09 '13 at 21:51
its from another piece of code from another post. i tried using document but it didn't work. I'm new to jQuery — lala7mac, Jun 09 '13 at 21:54
i realize it does nothing now that you pointed it out, but i'm not sure why — lala7mac, Jun 09 '13 at 21:55
@Zenith thats odd that it doesn't work on my end but works fine on your jsFiddle.. — lala7mac, Jun 09 '13 at 21:58
@lala7mac Make a jsFiddle using your code showing a case where it doesn't work? — dsgriffin, Jun 09 '13 at 22:00
a sidenote to the jsFiddle demo, when moving the mouse from one child to the next, the previous child sometimes fails to slide back up. But that's not a big deal — lala7mac, Jun 09 '13 at 22:12

jQuery - mouseleave/mouseenter doesn't trigger when moving directly between divs; must enter body first

0 Answers0