1

html:

<img src="logo.svg" alt="Logo" class="logo-img">

css:

.logo-img path:hover {fill: red;}

Is there a way to change a the hex code on a img svg on hover?

Ismail
  • 79
  • 9
  • 1
    I ran into same kind of problem earlier. What I did was to use the image as a background of a division with width & height an then change the `background-image` property on hover. I wasn't able to change the source though. – Debsmita Paul Sep 01 '20 at 11:39
  • @Martin I've tried to change it within the SVG file but no luck. Besides that I only tried to change fill to red as you can see. I couldnt find any other solution for in on the internet. – Ismail Sep 01 '20 at 11:43

2 Answers2

2

I don't think you can do that using CSS only, but you could do it with a bit of JavaScript, if you can change the HTML.

Something like:

onmouseover="this.src='newSrcHover.jpg';"

Or you can change the background-image: url('linkToNewImage')property on :hover... while that does change an image on hover and may be sufficient for some, it's not src. The JS one is.

Morgosus
  • 807
  • 5
  • 18
2

An svg in a src attribute is loaded as a file, so it won't be editable.

If you intend to modify fill, stroke and so on, you should use your logo.svg in an <svg> tag instead of an <img />.

Aurélien B.
  • 498
  • 2
  • 9