Responsive Landing page using HTML, CSS & JS

Community feedback

• 

  Shalom2935•420

  @Shalom2935Posted over 1 year ago

  You must have something like this in your html code: <div class="icon"><svg>...</svg></div> Then in your css code you use the selector .icon svg path:hover{fill: #fff}. But you must look carefully where the fill property is locate, most of the time it will be in the path element but it can also be in another element.

  Marked as helpful

  1
• 

  Shalom2935•420

  @Shalom2935Posted over 1 year ago

  open the svg with a text editor you will see something like <svg width =" " height = " "><path fill ="color"></path></svg> (It will be more than just that) but the only thing you need to modify is the fill property of the path element

  Marked as helpful

  1

  ---

  

  Eduardo•160

  @Ecrb3Posted over 1 year ago

  @Shalom2935 Ok, but how can I change this when hovering over the icon for example?

  0
• 

  Fran Extremera•210

  @franexmo81Posted over 1 year ago

  Here is an example of SVG changing colours when hovering:

  Inline SVG Hovers

  Basically, you need to include the SVG definition inside the html document, instead of linking them from it. Then you select it and modify fill with :hover pseudo-class

  I hope it helps

  0