如何实现鼠标悬停时同时高亮SVG图标与链接文本？

要实现鼠标悬停时同时高亮SVG图标和对应链接文本，你需要调整HTML结构并修改CSS样式，具体如下：

调整HTML结构 #

把SVG图标嵌入到对应的链接标签内部，确保两者属于同一个可交互区域：

<div class="contact-information-header-flex container">
  <a class="contact-information-header email" href="mailto:info@devstudio.com">
    <svg class="email-svg" width="16px" height="12px">
      <use href="./images/icons.svg/email.svg#icon-envelope"></use>
    </svg>
    info@devstudio.com
  </a>

  <a class="contact-information-header" href="tel:+48111111111">
    +48 111 111 111</a>
</div>

修改CSS样式 #

通过父链接标签的:hover状态，同步控制内部文本和SVG的样式：

/* 初始状态样式 */
.contact-information-header.email {
  color: #757575;
}
.email-svg {
  fill: #757575;
}

/* 悬停时同步高亮 */
.contact-information-header.email:hover {
  color: #2196F3;
}
.contact-information-header.email:hover .email-svg {
  fill: #2196F3;
}

原理说明：将SVG和链接文本放在同一个<a>标签下后，鼠标悬停整个链接区域时，父元素的:hover状态会触发，此时可以同时修改内部文本的颜色和SVG的填充色，实现两者同步高亮的效果。

内容的提问来源于stack exchange，提问作者Grzegorz Mystkowski