我正在使用几个div,它们之间没有边距/空格,我在第一次输入鼠标后无法触发mouseleave / enter事件 .

换句话说,我希望触发事件而不必A)将鼠标移回页面主体,或者B)在每个div之间设置边距,使鼠标有机会在进入之前越过身体一个新的div .

所有发生的事情是我正在切换目标div的背景图像并且有一个子div幻灯片,它最终会有文本/链接 .

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>