javascript - 在鼠标悬停/取消悬停父元素时，更改子图像的 url 哈希

Question

我有一个<li>与 <img>里面。我想按类(class)或 ID 选择每个人。这个<img>是一个具有 #black 和 #white 版本的 SVG，我的 HTML 中他的 url 默认以 #black 结尾。我需要的:当我悬停 <li> 时我需要将 的网址结尾从 #black 更改为 #white，并且当用户悬停时，再次更改为 #black 。如何在 Javascript 中操作文本结尾(本例中 <img url=""> 处的 #)？

提前致谢，我相信本主题中的答案也会对其他用户有所帮助。

Answer 1

编辑2:

(如果愿意，您可以将“img”替换为选择器)

$("li.navi-item").hover(function() {
  $(this).find("img").attr("src", $(this).find("img").attr("src").replace("#black", "#white"));
}, function() {
  $(this).find("img").attr("src", $(this).find("img").attr("src").replace("#white", "#black"));
});

将代码放入 $(document).ready(function () { }