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

How to change an image on mouse over?

本文关键字：图像 悬停 鼠标      更新时间：2023-09-26

我想做这样的事情。

<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

谢谢。

你不需要jQuery来做到这一点，因为你可以很容易地使用vanilla JS甚至CSS来做到这一点。

您可以通过这样做来节省页面加载时间（在原版 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>

如果您的目标是在悬停时显示第二张图像并在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>

你可以

用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;
}

检查这个小提琴。

相关文章：