javascript - 悬停时交替显示/隐藏图像 - Mootools

Question

嗯，我试图使用 Mootools 仅当鼠标位于(悬停或 mouseenter 或 mouseover)第一个图像时才显示第二个图像。这是 HTML:

<div class="images">
    <img class="first" width="300" src="https://farm8.static.flickr.com/7325/16338493327_1803b63761_b.jpg" alt="First"/>
    <img class="second" width="300" src="https://farm8.static.flickr.com/7383/16336731260_e5d532ea65_b.jpg" alt="Second"/>
</div>

这是 JavaScript 代码:

$$(".images .first").addEvents({
    mouseover: function(){
        $$(".images .second").setStyle('display', 'block');
        $$(".images .second").fade('in');
        this.fade('out');
        this.setStyle('display', 'none');
    },
    mouseleave: function(){
        this.setStyle('display', 'block');
        this.fade('in');
        $$(".images .second").fade('out');
        $$(".images .second").setStyle('display', 'none');
    }
});

我不知道我在这里做错了什么。有什么帮助吗？非常感激。
这是 jsfiddle如果有帮助的话。

Answer 1

将事件附加到 .images 并更明确地设置样式似乎有帮助:

$$(".images").addEvents({
    mouseover: function(){
        $$(".images .second").setStyle('display', 'block');
        $$(".images .second").fade('in');
        $$(".images .first").fade('out');
        $$(".images .first").setStyle('display', 'none');
    },
    mouseleave: function(){
        $$(".images .first").setStyle('display', 'block');
        $$(".images .first").fade('in');
        $$(".images .second").fade('out');
        $$(".images .second").setStyle('display', 'none');
    }
});

另外，将 opacity:0 添加到 .second 以使其在初始鼠标输入时淡出。

.second{
    display:none;
    opacity: 0;
}

https://jsfiddle.net/lemoncurry/6pkpfb3q/1/