如何在鼠标悬停时更改图像？

兰吉斯·巴斯卡兰（Ranjith Bhaskaran）

我想做这样的事情。

<a href="#" class="change-hover" >
<img src="img/image-1.jpg"  alt=""/>
<img src="img/image-2.jpg" alt=""/>
</a>
<a href="#" class="change-hover" >
<img src="img/image-3.jpg"  alt=""/>
<img src="img/image-4.jpg" alt=""/>
</a>

默认情况下，“ image-1.jpg”和img / image-3.jpg等应显示，在“ a”标签上的鼠标上，隐藏第一个图像并显示“ image-2.jpg”和“ image-4.jpg” ' 等等..

作为参考，请查看此产品展示。http://www.thecorner.com/searchResult.asp?dept=tcshoesw&brand=25&gender=D&norewrite=1

谢谢。

dfsq

如果您的目标是在悬停时显示第二个图像mouseout，然后在上隐藏它，显示第一个图像，则可以使用hover以下示例中的方法。

请注意，第二张图片最初是用CSS隐藏的。

$('.change-hover').hover(function () {
    $(this).find('img').hide().last().fadeIn();
}, function () {
    $(this).find('img').hide().first().fadeIn();
});

.change-hover img {
    display: none;
}
.change-hover img:first-of-type {
    display: inherit;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a href="#" class="change-hover">
    <img src="http://lorempixel.com/100/100/food/1"  alt=""/>
    <img src="http://lorempixel.com/100/100/food/2" alt=""/>
</a>

<a href="#" class="change-hover">
    <img src="http://lorempixel.com/100/100/food/3"  alt=""/>
    <img src="http://lorempixel.com/100/100/food/4" alt=""/>
</a>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。