Responsive Landing page using HTML, CSS & JS

Community feedback

• 

  Shalom2935•420

  @Shalom2935

  Posted over 2 years 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.

  10

  Marked as helpful
• 

  Shalom2935•420

  @Shalom2935

  Posted over 2 years 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

  11

  Marked as helpful
• 

  Fran Extremera•210

  @franexmo81

  Posted over 2 years 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

  00