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