javascript - Mootools 淡入淡出平滑效果

Question

嗨，我需要叠加层在 mouseenter 和 mouseleave 上平滑淡入淡出。覆盖在 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');
    }
});

Answer 1

您不能同时使用 display: none 和 mouseenter 。最好将 mouseenter/mouseleave 事件放在 .img_wrapper 而不是图像本身上，这样事件才会真正触发。