0

こんにちは、マウスエンターとマウスリーブでオーバーレイをスムーズにフェードインおよびフェードアウトする必要があります。オーバーレイは、CSS で何も表示しないように設定されています (このようにする必要があるため、mouseenter で表示されます)。素敵なフェードイン効果を作成するにはどうすればよいですか?

#overlay{
width:300px;
height:161px;
background-color: white;
position: absolute;
display: none;
top: -300px;
left: 150px;
}

    var xlImgOverlay = $('overlay');

// overlay for showing larger images
$$('.s_img .img_wrapper img').addEvents({
    mouseenter: function(){
        var xlImg = this.getAttribute('data-xl-img');
        console.log(xlImg);
        var xlImgEl = new Image();
        xlImgEl.src = xlImg;

        xlImgOverlay.grab(xlImgEl, 'top');
        xlImgOverlay.setStyle('display', 'block');
        el.setStyle('opacity', '0.7');
        console.log(xlImgOverlay);
        xlImgOverlay.fade('in', 500);

        },
    mouseleave: function(){
        xlImgOverlay.fade('out', 500);
        xlImgOverlay.empty();
        xlImgOverlay.setStyle('display', 'none');
        el.setStyle('opacity', '1');
    }
});
4

1 に答える 1

1

display: none と mouseenter を一緒に使用することはできません。イベントが実際に発生するように、画像自体ではなく、mouseenter/mouseleave イベントを .img_wrapper に配置することをお勧めします。

于 2013-01-31T18:15:58.023 に答える