javascript - 在鼠标悬停时更改，制作 main.jpg

Question

是否可以在悬停时将 main.jpg 更改为特定的 img，这样它就像...

• onmousehover #1 --> changeto.. main1.jpg
• onmousehover #2 --> changeto.. main2.jpg
• onmousehover #3 --> changeto.. main3.jpg

这是……它的样子……

---

---

让我知道我应该如何解决这个...谢谢!

Answer 1

添加主图标签如下:

<img class="main-img" src="" />

添加如下三个链接:

<div class="hover-img-change">
    <a data-src='imagepath here'><img src="" /></a>
    <a data-src='imagepath here'><img src="" /></a>
    <a data-src='imagepath here'><img src="" /></a>
</div>

在上面的代码中，在 data-src 中添加背景图片路径。

添加脚本:

<script  type='text/javascript'>
$(document).ready(function(){
    $(".hover-img-change a").hover(function() {
          var backgroundImg = $(this).attr("data-src");
          $('.main-img').attr("src",backgroundImg);
    });
});
</script>