Question

我想做这样的事情。

<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'＆amp; img / image-3.jpg等...应显示，鼠标悬停在'a'标签上，隐藏第一张图片并显示'image-2.jpg'＆amp; 'image-4.jpg'等..

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

感谢。

Answer 1

你不需要jQuery这样做，因为你可以使用vanilla JS甚至CSS轻松完成。

你可以通过这样做来节省页面加载时间（在vanilla JS中）：

<a href="#">
    <img src="img/image-1.jpg" onmouseover="this.src = 'img/image-2.jpg'" onmouseout="this.src = 'img/image-1.jpg'">
</a>
<a href="#">
    <img src="img/image-3.jpg" onmouseover="this.src = 'img/image-4.jpg'" onmouseout="this.src = 'img/image-3.jpg'">
</a>

Answer 2

如果您的目标是在悬停时显示第二张图片并将其隐藏在mouseout上，并显示第一张图片，那么您可以使用hover方法，如下例所示。

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

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 3

您可以使用CSS：

.change-hover {
    float: left;
}

.change-hover img + img {
    display: none;
    position: absolute;
    top: 0;
}

.change-hover img:hover + img, .change-hover img + img:hover {
    display: block;
}

检查this fiddle。

如何在鼠标上更改图像？

3 个答案: