当鼠标悬停时更改按钮上图像的源。

Question

当我悬停在按钮上时，我想要更改我的img src。

有一些答案与我的类似，

但我仍然无法弄清楚。

<button class='Nav' id="Nav_Homepage">
    <img src="./img/Homepage.png" class='img_Nav' id="img_Homepage">
    <label class='lb_Nav'> Homepage </label>
</button>

- Lee

---

你可能需要使用 JavaScript 来完成这个任务。 - Kristijan Iliev

@Nirus 你是对的，但在我有限的知识中，我无法想到只使用 CSS 更改图像 src 的解决方案。如果我错了，请纠正我。 - Kristijan Iliev

@Chris，我完全同意你的观点。但是在我看来，我建议OP改变逻辑，遵循最佳实践，而不是坚持自己需要的方式，当有更好的方法可以实现相同的目标时。 - NiRUS

@Nirus 谢谢你的关心。 - Kristijan Iliev

@Chris WC。很高兴能帮忙！ - NiRUS

Answer 1

您可以使用CSS来实现这一点。

#Nav_Homepage span {
  background: url(https://dummyimage.com/20x20/000/fff.png&text=P) no-repeat;
  width: 20px;  /* your image width */
  height: 20px; /* your image height */
  display: inline-block;
}
#Nav_Homepage label {
  display: inline-block;
}
#Nav_Homepage:hover span {
  background: url(https://dummyimage.com/20x20/ff0000/ffffff.png&text=H) no-repeat;
}

<button class='Nav' id="Nav_Homepage">
    <span class='img_Nav'></span>
    <label class='lb_Nav'> Homepage </label>
</button>

- Super User

---

谢谢！只用 CSS 就解决了问题！ - Lee

好奇问一下，属性“background”和“background-image”的主要区别是什么？ - Lee

@Lee 如果你使用 background-image，那么你必须单独使用 background-repeat 和 background-position，如果你没有使用与 width 和 height 标签中使用的确切大小图像相同的图像。 - Super User

Answer 2

如果您有新的图像来源，请使用此代码。如果您想要更改图像并使用多个图像，请使用此方法。

$('#btn_id')

.on('mouseenter', function() {
    $('#img_Homepage').attr('src', 'url_of_new_image');
})

.on('mouseleave', function() {
    $('#img_Homepage').attr('src', 'url_of_old_image');
});

- Farsheed Feeruzy

---

谢谢！这也可以，但我更喜欢使用CSS。再次感谢！ - Lee

Answer 3

$(document).ready(function() {
  $("#Nav_Homepage").mouseenter(function() {
    $(this).children('img').attr("src", "./img/newimage.png");
  });
  $("#Nav_Homepage").mouseleave(function() {
    $(this).children('img').attr("src", "./img/Homepage.png");
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<button class='Nav' id="Nav_Homepage">
    <img src="./img/Homepage.png" class='img_Nav' id="img_Homepage">
    <label class='lb_Nav'> Homepage </label>
</button>

- athi

---

这里有两个问题，首先 $(this) 指的是这里的按钮 #Nav_Homepage 而不是其中的图片。 其次 当鼠标移开时，你只是在 mousover 时更改了图片的 src，而没有将其改回原始图片。 - Mi-Creativity

谢谢！代码已经更新。 - athi