Как изменить цвет текста и изображения SVG вместе с css?

Question

У меня есть svg и фрагмент текста:

svg {
  width: 70px;
  height: 70px;
}
svg:hover {
  fill: red !important;
}

div > svg.icon:hover circle,
div > svg.icon:hover path {
  stroke: red;
}

.custom-fill:hover {
  color:red;
}


body {
  display: grid;
  height: 100vh;
  margin: 0;
  place-items: center center;
}

<div>
            <a>
              <div class="custom-fill">
                <div>
                  <svg class="icon" id="6a8da56c-64cb-4c0d-b7e3-2b80c0db2d07" data-name="ICON" xmlns="http://www.w3.org/2000/svg" width="192" height="192" viewBox="0 0 192 192"><circle id="3ad8aabf-2066-47d6-9a2f-c027e5c19606" data-name="&lt;Pfad&gt;" cx="96" cy="63.91" r="36.09" fill="none" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="8"/><path id="243fad7b-53d4-4daa-93b6-31f40d832ead" data-name="&lt;Pfad&gt;" d="M156,164.1c-6.48-43.88-33.17-64.23-59.64-64.23S42.49,120.21,36,164.09" fill="none" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="8"/><rect width="192" height="192" fill="none"/></svg>
                </div>
                <label class="iconLabel"> This is a text </label>
              </div>
            </a>
</div>

Что мне нужно сделать, это изменить цвет изображения и текста вместе. Как вы можете заметить, это работает, когда я наведите курсор на изображение (изображение и текст меняют цвет), но когда я наведите курсор на текст, только текст изменил цвет ( изображение не ).

Может ли кто-нибудь помочь мне сделать это правильно?

Answer 1

В настоящее время вы назначаете селектор :hover для самого элемента svg. Просто назначьте его контейнеру custom-fill, и он будет работать.

svg {
  width: 70px;
  height: 70px;
}
div.custom-fill:hover {
  color: red;
}
div.custom-fill:hover circle,
div.custom-fill:hover path {
  stroke: red;
}


body {
  display: grid;
  height: 100vh;
  margin: 0;
  place-items: center center;
}

<div>
            <a>
              <div class="custom-fill">
                <div>
                  <svg class="icon" id="6a8da56c-64cb-4c0d-b7e3-2b80c0db2d07" data-name="ICON" xmlns="http://www.w3.org/2000/svg" width="192" height="192" viewBox="0 0 192 192"><circle id="3ad8aabf-2066-47d6-9a2f-c027e5c19606" data-name="&lt;Pfad&gt;" cx="96" cy="63.91" r="36.09" fill="none" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="8"/><path id="243fad7b-53d4-4daa-93b6-31f40d832ead" data-name="&lt;Pfad&gt;" d="M156,164.1c-6.48-43.88-33.17-64.23-59.64-64.23S42.49,120.21,36,164.09" fill="none" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="8"/><rect width="192" height="192" fill="none"/></svg>
                </div>
                <label class="iconLabel"> This is a text </label>
              </div>
            </a>
</div>