1

我正在使用一些 div，它们之间没有边距/空格，并且在第一次进入鼠标后触发 mouseleave/enter 事件时遇到了麻烦。

换句话说，我希望事件触发而不必 A）将鼠标移回页面的主体，或 B）在每个 div 之间留出边距，以便鼠标在进入之前有机会越过主体一个新的分区。

正在发生的一切是我正在切换目标 div 的背景图像并有一个子 div slideDown 最终将在其上具有文本/链接。

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>
4

0 回答 0