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');
    }
});

我不知道我在这里做错了什么。对此有什么帮助？非常感激。如果有帮助的话，这里是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');
    }
});

另外，添加不透明度：0到.second，使其在初始鼠标中心淡出。

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

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

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

1 个答案: