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

Question

I have an <li> with an <img> inside. I want pick each one by his class or id. This <img> is an SVG with #black and #white versions, and his url in my HTML ends with #black as default. What I need: When I hover <li> I need that the 's url end changes from #black to #white , and when user unhover, changes again to #black . How can I manipulate end of texts ( # at <img url=""> in this example) in Javascript?

Thanks in advance, and I believe that answers in this topic will help other users as well.

Answer 1

EDIT 2:

(you can replace "img" with your selector if you like)

$("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"));
});

put the code inside your $(document).ready(function () { }