Question

我有两张图片，我想要发生的是，当我将鼠标悬停在图像上时，图像将变为第二张图像，然后当我再次悬停在图像上时，图像将变为第一张图像。

如何使用JavaScript执行此操作？

Answer 1

HTML

<div class="image_container">
 <img src="foo.png" class="first"/>
 <img src="bar.png" class="last"/>
</div>

的jQuery

$(".image_container").hover(function(){
  $(this).toggleClass("switch");
});

CSS

.image_container .last{display:none;}
.image_container.switch .last{display:block;}
.image_container.switch .first{display:none;}

Answer 2

这是一个Javascript解决方案。一旦你理解了下面的内容，我强烈建议你研究一下Jquery。在你的情况下，你似乎不需要onmouseout。

HTML

<img src="urImg.png" onmouseover="chgImg(this)" onmouseout="normalImg(this)">

的Javascript

function chgImg(x) {
x.src = "newImg.png";
}

function normalImg(x) {
x.src = "urImg.png";
}

Answer 3

你可以这样做！

<a href="#" id="name">
    <img title="Hello" src="images/view2.jpg>
</a>


  $('#name img').hover(function() {
   $(this).attr('src', 'images/view1.jpg');
   }, function() {
  $(this).attr('src', 'images/view2.jpg');
});

Answer 4

对于不想使用 Javascript 的任何人，只需使用 HTML、CSS。

您只需要使用 position: absolute; 创建第二个图像并将其与原始图像一起放入 div（使用 position: relative;）

之后，您可以使用 CSS 控制鼠标悬停第二张图片的 opacity。

以下是我使用 TailwindCSS 的示例代码

<div className="relative">
 <img 
    src="/image1.png" 
    className="w-[100px] h-[100px]"/>
 <img 
    src="/image1.png" 
    className="w-[100px] h-[100px] absolute opacity-[0] hover:opacity-[1]"/>
</div>

如何在我悬停时更改图像，然后仅在我再次悬停时返回原始图像

4 个答案: