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

Question

我有一个内部有<img>的<li>。我想根据每个人的阶级或身份来挑选。这个<img>是一个SVG，有#black和#white两个版本，他在我的HTML中的url默认以#xlack结尾。我需要什么：当我悬停在<li>时，我需要的url端从#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"));
});

将代码放入$（文档）.ready（函数（）｛｝