css: how to change SVG color when :hover on Parent element

Sore Sardine answered on May 27, 2022 Popularity 3/10 Helpfulness 1/10

answer css: how to change SVG color when :hover on Parent element

css: how to change SVG color when :hover on Parent element

Comment

// Example: change icon.svg color when hover on parent

// # html
<a class="parent">
    <img src="/trash.svg" alt="" class="child">
</a>
  

// # css

.parent {
  width: 60px;
  height: 60px;
  cursor: pointer;
  border-radius: 50%;
  display: grid;
  place-items: center;
}

.parent:hover {
  background-color: crimson;
}

.parent:hover .child {      /*  Change Child: SVG color when :hover on parent element  */
  filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(170deg) brightness(104%) contrast(105%);
}

Popularity 3/10 Helpfulness 1/10 Language html

Source: Grepper

Tags: element html parent svg when

Link to this answer
Share Copy Link

Contributed on May 27 2022

Sore Sardine

0 Answers Avg Quality 2/10

css: how to change SVG color when :hover on Parent element

Contents

More Related Answers

css: how to change SVG color when :hover on Parent element

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.