Sunnyside Agency Landing Page with React

Community feedback

• 

  Cor-Ina•250

  @CorinaMurgPosted over 1 year ago

  @KayGeorgeson

  Hi Kay, I had a hard time as well figuring out how to change the color on hover for the svg elements.

  I don't know much React, but this is what worked for me in JS (similar to what @FloRiouffreyt suggested):

  • go to the svg file. In the <path> element, change fill="current color";
  • with css set svg { color: white; } and svg:hover { color: green; }.

  This does require that you use <svg> and not <img> in your html (at least, I wasn't able to get it to work with <img>). Hope this helps a bit! Corina

  Marked as helpful

  1

  ---

  

  Kay•40

  @KayGeorgesonPosted over 1 year ago

  @Cor-Ina Hi yes I thought there must have been an easier way than my hacky way haha I'm going to play about with both solutions given to see if I can make them work in Chrome. Thank you!

  0
• 

  P

  BigDaddyFlo•570

  @FloRiouffreytPosted over 1 year ago

  It's definitely possible to do the color change with CSS, by using directly the <svg> and not an <img> tag. Feel free to check to way I did it, it works perfectly fine.

  Import the <svg>, add the "fill" attribute with the default green color on it, and then in CSS, locate your svg and create the hover rule.

  It's even better to put the <svg> inside an element which will be the one pointed by the hover. If you hover an SVG, every part that is not filled will not be considered "hovered" (like the hollow part of the F of Facebook for example".

  If you put it inside an <ul> then each <svg> in <li>, give a common class to all your <li>, and in CSS, simply add " .your-li-class:hover > svg { fill:#yourcolor }. Hope this helps!

  Marked as helpful

  0

  ---

  

  Kay•40

  @KayGeorgesonPosted over 1 year ago

  @FloRiouffreyt Thank you! I'm going to play around with this solution and see if I can get it to work :)

  1