Show/Hide 悬停时交替显示图像 - Mootools

Question

好吧，我正在尝试使用 Mootools 仅在鼠标位于（悬停或鼠标输入或鼠标悬停）第一张图像时显示第二张图像。这是 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');
    }
});

我不知道我做错了什么here.Any帮忙解决一下？非常感激。
如果有帮助的话，这里是 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/

Show/Hide 悬停时交替显示图像 - Mootools

Show/Hide images alternavely when hover - Mootools

javascript

mootools