не закрашивается svg при наведении на ссылку

Question

.header-contact {
  display: inline-flex;
  align-items: center;
  margin-left: auto;

}
.header-contact .item + .item {
  margin-left: 50px;  
}

.header-contact .item{
  display: inline-flex;
  align-items: center;
  padding: 0;
  margin: 0;
  border: none;

}

.icon-mail{
  width: 16px;
  height: 16PX;
  margin-right: 10px;
  fill: var(--secondary-text-color);
}

.icon-smartphone {
  width: 16px;
  height: 16PX;
  margin-right: 10px;
    fill: var(--secondary-text-color);
}

.header-contact .link {
  display: flex;
  padding-top: 32px;
  padding-bottom: 32px;

  color: var(--secondary-text-color);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.14;
  letter-spacing: 0.02em;
  text-decoration: none;
}
.header-contact .link:hover,
.header-contact .link:focus,
.icon-mail:hover,
.icon-smartphone:hover {
  cursor: pointer;
  color: var(--accent-texte-color);
  fill: var(--accent-texte-color);
}

        <ul class="header-contact list">
          <li class="item item-mail">
            <a href="mailto:info@[email protected]" class="link"
              ><svg class="icon-mail">
                <use href="/icons/symbol.svg#icon-mail"></use>
              </svg>
              [email protected]</a
            >
          </li>

          <li class="item item-smartphone">
            <a href="tel:8-999-888-77-66" class="link"
              ><svg class="icon-smartphone">
                <use href="/icons/symbol.svg#icon-smartphone"></use>
              </svg>
              8-999-888-77-66</a
            >
          </li>
        </ul>

Answer 1

Потому что CSS считает, что Вы наводитесь на ссылку, а иконка находится внутри ссылки (у <a> нет свойства fill) – из-за этого иконка не красится. Чтобы решить эту проблему, нужно присвоить свойства для .header-contact .link:hover svg или .header-contact .link:hover .icon-mail, .header-contact .link:hover .icon-smartphone:

:root {
  --secondary-text-color: #555;
  --accent-texte-color: red;
}

.header-contact {
  display: inline-flex;
  align-items: center;
  margin-left: auto;
}

.header-contact .item+.item {
  margin-left: 50px;
}

.header-contact .item {
  display: inline-flex;
  align-items: center;
  padding: 0;
  margin: 0;
  border: none;
}

.icon-mail {
  width: 16px;
  height: 16PX;
  margin-right: 10px;
  fill: var(--secondary-text-color);
}

.icon-smartphone {
  width: 16px;
  height: 16PX;
  margin-right: 10px;
  fill: var(--secondary-text-color);
}

.header-contact .link {
  display: flex;
  padding-top: 32px;
  padding-bottom: 32px;
  color: var(--secondary-text-color);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.14;
  letter-spacing: 0.02em;
  text-decoration: none;
}

.header-contact .link:hover,
.header-contact .link:focus,
.icon-mail:hover,
.icon-smartphone:hover {
  cursor: pointer;
  color: var(--accent-texte-color);
}

.header-contact .link:hover svg,
.header-contact .link:focus svg {
  fill: var(--accent-texte-color);
}

<ul class="header-contact list">
  <li class="item item-smartphone">
    <a href="tel:8-999-888-77-66" class="link">
      <svg class="icon-smartphone" x="0px" y="0px" viewBox="0 0 53.942 53.942">
<path d="M53.364,40.908c-2.008-3.796-8.981-7.912-9.288-8.092c-0.896-0.51-1.831-0.78-2.706-0.78c-1.301,0-2.366,0.596-3.011,1.68
    c-1.02,1.22-2.285,2.646-2.592,2.867c-2.376,1.612-4.236,1.429-6.294-0.629L17.987,24.467c-2.045-2.045-2.233-3.928-0.632-6.291
    c0.224-0.309,1.65-1.575,2.87-2.596c0.778-0.463,1.312-1.151,1.546-1.995c0.311-1.123,0.082-2.444-0.652-3.731
    c-0.173-0.296-4.291-7.27-8.085-9.277c-0.708-0.375-1.506-0.573-2.306-0.573c-1.318,0-2.558,0.514-3.49,1.445L4.7,3.986
    c-4.014,4.013-5.467,8.562-4.321,13.52c0.956,4.132,3.742,8.529,8.282,13.068l14.705,14.705c5.746,5.746,11.224,8.66,16.282,8.66
    c0,0,0,0,0.001,0c3.72,0,7.188-1.581,10.305-4.698l2.537-2.537C54.033,45.163,54.383,42.833,53.364,40.908z"/>
  </svg> 8-999-888-77-66
    </a>
  </li>
</ul>

(Иконка была заменена на полноценную, чтобы это работало в StackOverflow, для <use> будет работать точно так же).

БЛОГ НА HUSL

не закрашивается svg при наведении на ссылку

Ответы (1 шт):