Change SVG color on hover using custom code only

Design help Custom code
1

Hi there,

I have an SVG with multiple lines that are different colors, and I want to change the colors on hover:

Screen Shot 2021-04-13 at 2.31.24 PM

For other SVGs, I’ve changed it so fill=“currentcolor” and used Webflow’s typography to change them, but since this one has different colors, I want to change it within the custom code if that’s possible.

I’ve tried putting style=“svg:hover { fill: #000000;};” which I saw in another forum post, but that didn’t work…

Is there a way to do this?

I actually cannot include a read-only link for the website because my client is very particular about sharing.

But here is the code I’m using –

< svg width=“35px” height=“44.9px” viewBox=“0 0 45 50” version=“1.1” xmlns=“SVG namespace” xmlns:xlink=“XLink namespace” style=“svg:hover { fill: #000000;};”>
< title>Group 3 Copy< /title>
< defs>< /defs>
< g id=“Navigation-Bars” stroke=“none” stroke-width=“1” fill=“none” fill-rule=“evenodd”>
< g id=“Mobile-Nav-Bars” transform=“translate(-241.000000, -1365.000000)” fill-rule=“nonzero”>
< g id=“Group-3-Copy” transform=“translate(241.000000, 1365.000000)”>
< rect id=“Rectangle-Copy-10” fill=“#4D1A20” x=“24.375” y=“0” width=“20.625” height=“4.5”>< /rect>
< rect id=“Rectangle-Copy-22” fill=“#4D1A20” x=“24.375” y=“36” width=“20.625” height=“4.5”>< /rect>
< rect id=“Rectangle-Copy-10” fill=“#4D1A20” x=“0” y=“0” width=“20.625” height=“4.5”>< /rect>
< rect id=“Rectangle-Copy-23” fill=“#4D1A20” x=“0” y=“36” width=“20.625” height=“4.5”>< /rect>
< rect id=“Rectangle-Copy-11” fill=“#41816F” x=“0” y=“9” width=“45” height=“4.5”>< /rect>
< rect id=“Rectangle-Copy-20” fill=“#41816F” x=“0” y=“18” width=“45” height=“4.5”>< /rect>
< rect id=“Rectangle-Copy-21” fill=“#41816F” x=“0” y=“27” width=“45” height=“4.5”>< /rect>
< rect id=“Rectangle-Copy-12” fill=“#4D1A20” x=“0” y=“45” width=“45” height=“4.5”>< /rect>
< /g >
< /g>
< /g>
</ svg >

2

Hey @eark,

I am sorry about the answer from the other forum you have received but :hover is a psuedo-element that has no meaning in inline CSS but is made to be used within a stylesheet.

I would recommend giving your svg a class, like <svg class="rect-svg" width="35px"... and then go into your Page Settings, scroll to the bottom section where you have option of adding custom code in the head section and include this code or use a custom HTML embed in your page above your svg element.

<style>
      .rect-svg:hover {
          fill: red;
      }
</style>

What this would do for you is, when you hover with your mouse over the SVG with the class rect-svg, it will turn red.

Hope this helps!

3

Thank you so much @imtiazraqib !

That makes a lot more sense.

For some reason, I’m still struggling to get it to work…
I tried it in the <head> section of the page and the website; and I tried putting it in the same HTML embed with the SVG.

But I will keep trying things!

4

I am sorry to hear that @eark, I did do a mistake in my previous code where I tried commenting within the css line, I have removed that now!
Also a quick note, you have to publish the site to a staging area, like webflow.io because custom codes do not get executed in the preview mode, they have to be published for you to see the code being implemented.

Hopefully this helps you out!

5

If you put your custom CSS in an HTML Embed element between <style> tags you’ll be able to see the effect live in the Designer :+1:

This can help you debug more quickly and once you get it working you can move that code over to the Page Settings (or Project Settings if it’s an element that appears on every page on the project).

6

Thank you @imtiazraqib , and @mikeyevin that is a super helpful idea.

I’m s t i l l struggling, if you wouldn’t mind taking a quick look at this code to see if I have this correct I would appreciate it very much, because it seems like it should be working…

I tried it with a simpler SVG, in an HTML embed:

<svg class="x-svg" width="70px" height="70px" viewBox="0 0 70 70" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <g id="Logo-&amp;-graphics" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="Web-Icons" transform="translate(-1062.000000, -901.000000)" fill-rule="nonzero" stroke="#000000" stroke-width="8">
            <g id="Group-2" transform="translate(1096.500000, 936.500000) rotate(45.000000) translate(-1096.500000, -936.500000) translate(1052.000000, 892.000000)">
                <path d="M45,0 L45,88.8024135" id="Path-12"></path>
                <path d="M88.8024135,44 L0,44" id="Path-12-Copy"></path>
            </g>
        </g>
    </g>
</svg>

and then in another HTML embed, I have:

<style>
.x-svg:hover {
          fill: red;
      }
</style>

and its not showing up in preview or in published version…

7

Maybe your issue is that the SVG isn’t using fill and the color is actually applied to the descendant elements. Try this instead:

<style>
.x-svg:hover g, .x-svg:hover path{
          fill: red;
      }
</style>

That basically means: everytime x-svg is hovered, apply fill red to all the g tags that are a descendant of it AND do the same for all the path tags that are a descendant of it.

Or you could keep your code and do this:

<style>
    .x-svg:hover {
              fill: red;
          }
   .x-svg g, .x-svg path {
              fill: inherit  !important;
           } 
    </style>

This code basically means: all g and path tags that are somewhere within the x-svg class should always inherit the current color of their most senior parent that has a color set. The important tag is there so that the browser ignores the inline style of those elements.

Sorry for the formatting. I’m on mobile!

8

@ktoo THANK YOU!!!

That worked!!

Except I replaced “fill” with “stroke” - I think that worked since the descendent elements had stroke="#000000"

1 Like
9

If anyone ever needs to change SVG color, this is what worked for me:

To make the “X” SVG change to red on hover, I added a class to the SVG and used it to change the path stroke on hover:

<svg class="x-svg" width="70px" height="70px" viewBox="0 0 70 70" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <g id="Logo-&amp;-graphics" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="Web-Icons" transform="translate(-1062.000000, -901.000000)" fill-rule="nonzero" stroke="#000000" stroke-width="8">
            <g id="Group-2" transform="translate(1096.500000, 936.500000) rotate(45.000000) translate(-1096.500000, -936.500000) translate(1052.000000, 892.000000)">
                <path d="M45,0 L45,88.8024135" id="Path-12"></path>
                <path d="M88.8024135,44 L0,44" id="Path-12-Copy"></path>
            </g>
        </g>
    </g>
</svg>

I used the code:

<style>
.x-svg:hover path{
          stroke: red;
      }
</style>

To invert the colors of my multi-colored SVG on hover, I added classes to the individual lines, and referenced those classes in the hover code:

<svg class="h2-svg" width="35px" height="44.9px" viewBox="0 0 45 50" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <g id="Navigation-Bars" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="Mobile-Nav-Bars" transform="translate(-241.000000, -1365.000000)" fill-rule="nonzero">
            <g id="Group-3-Copy" transform="translate(241.000000, 1365.000000)">
                <rect class="red" id="Rectangle-Copy-10" fill="#4D1A20" x="24.375" y="0" width="20.625" height="4.5"></rect>
                <rect class="red" id="Rectangle-Copy-22" fill="#4D1A20" x="24.375" y="36" width="20.625" height="4.5"></rect>
                <rect class="red" id="Rectangle-Copy-10" fill="#4D1A20" x="0" y="0" width="20.625" height="4.5"></rect>
                <rect class="red" id="Rectangle-Copy-23" fill="#4D1A20" x="0" y="36" width="20.625" height="4.5"></rect>
                <rect class="green" id="Rectangle-Copy-11" fill="#41816F" x="0" y="9" width="45" height="4.5"></rect>
                <rect class="green" id="Rectangle-Copy-20" fill="#41816F" x="0" y="18" width="45" height="4.5"></rect>
                <rect class="green" id="Rectangle-Copy-21" fill="#41816F" x="0" y="27" width="45" height="4.5"></rect>
                <rect class="red" id="Rectangle-Copy-12" fill="#4D1A20" x="0" y="45" width="45" height="4.5"></rect>
            </g>
        </g>
    </g>
</svg>

<style>
.h2-svg:hover .red {
          fill:#41816F;
      }

.h2-svg:hover .green {
          fill:#4D1A20;
      }
      
</style>

Thank you to all for your help!!

1 Like