On mouse hover/unhover parent element, change url hash of children image

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.

Are you saying that you want to switch the url, but also switch the svg to show the hover, or do you mean you want to change the src of the img tag? — mtrueblood, Apr 15 '16 at 13:03
Please put your sample code. Then, we can write the exact functional code — Mojtaba, Apr 15 '16 at 13:04
@Kaiido Do you know about SVG? Insertind a hash at end of img url can change the SVG group displayed, as an completly different image. I want exactly what I'm explaining in text. The "unreason" for you of insert a hash after image url dont make my answer "unclear". — dani 'SO learn value newbies', Apr 15 '16 at 13:05
The # can be changed, just show us the complete html markup eg. — yezzz, Apr 15 '16 at 13:06
if you're just looking to switch an image on hover you can get that done with css, we are just unsure of what your code is trying to do. — mtrueblood, Apr 15 '16 at 13:06
@yezzz I have various li with one image in each. I want change the hash of all to change its color in hover effects. The complete html markup is . I need a script that uses the class/id of
@Matt Trueblood I've searched and we can't change SVG color trought with CSS. — dani 'SO learn value newbies', Apr 15 '16 at 13:14
@DaniellMesquita, sorry forgot mention there is a javascript part, look here: — mtrueblood, Apr 15 '16 at 13:21
@MattTrueblood oh, then I can do it with CSS throught jQuery. This will be usefull for the part I want. But my project have other dynamic parts that I need maintain user's favorite image URL and automatically change a #hash of image url. How can I change the hash of an image url? — dani 'SO learn value newbies', Apr 15 '16 at 13:28
Thanks for your response, but this trick aren't what I want. I don't want a — dani 'SO learn value newbies', Apr 15 '16 at 13:30

score 1 · Answer 1 · edited Apr 15 '16 at 15:37

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 () { }

edited Apr 15 '16 at 15:37

dani 'SO learn value newbies'

151
1
15

answered Apr 15 '16 at 13:27

yezzz

2,990
1
10
19

Thanks, this is very near, but.... ....sorry, this is code is not very good. The is children of a
that is children of the referred
. This code can be more acurrate hiring the id/class instead of parental order.

– dani 'SO learn value newbies' Apr 15 '16 at 13:36

$("li.myclass").hover(function(){ $("img.myclass").attr("src").replace("#black", "#white"); }, function(){ $("img.myclass").attr("src").replace("#white", "#black"); }); can work better, with direct infalible referencing. – dani 'SO learn value newbies' Apr 15 '16 at 13:40

.navi-item is the class of

, and .navi-img is the class of .

– dani 'SO learn value newbies' Apr 15 '16 at 13:45

On mouse hover/unhover parent element, change url hash of children image

1 Answers1