“CSS: Jak zmienić kolor svg, kiedy: zawieszaj na elemencie nadrzędnym” Kod odpowiedzi

CSS: Jak zmienić kolor svg, kiedy: zawieszaj na elemencie nadrzędnym

// 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%);
}