求助：实现SVG与文本链接hover时同步变色的统一交互区域

问题核心是你当前CSS分别给SVG和<a>标签单独设置hover样式，导致只有鼠标直接悬停在SVG上时，SVG才会变色；悬停文本时只有文本变色。要实现两者同步，只需要把hover触发条件绑定到它们的父容器<a>上——因为SVG和文本都在<a>内部，鼠标悬停在<a>的任意区域（不管是SVG还是文本），都会触发<a>的hover状态，此时同时控制内部SVG的fill和文本的color即可。

修改后的CSS代码 #

.svg-social-menu li {
  display: inline-block;
  list-style-type: none;
}

.svg-social-menu li::before {
  display: none;
}

/* 初始状态：统一设置SVG和文本的颜色 */
.svg-social-menu svg {
  fill: #6d9dbd;
}

.svg-social-menu a {
  color: #6d9dbd;
  text-decoration: none;
  /* 让<a>包裹完整交互区域，同时让SVG和文本垂直居中 */
  display: inline-flex;
  align-items: center;
  gap: 8px; /* 给SVG和文本加间距，视觉更友好 */
}

.svg-social-menu li {
  background: none;
  border: none;
  box-shadow: none;
}

/* 关键：<a>被hover时，同步修改文本和SVG颜色 */
.svg-social-menu a:hover {
  color: #4c4c4c;
}

.svg-social-menu a:hover svg {
  fill: #4c4c4c;
}

/* visited状态只需设置文本颜色，无需单独设置SVG */
.svg-social-menu a:visited {
  color: #6d9dbd;
}

优化后的HTML代码 #

（去掉了SVG和<a>标签上多余的svg-social-menu类，避免样式冲突）

<ul class="svg-social-menu">
  <li>
    <a href="https://www.newsletter.de" alt="Newsletter-Logo">
      <svg version="1.1" id="Newsletter" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 491.84 491.84" style="enable-background:new 0 0 491.84 491.84;"
        xml:space="preserve" width="35" height="35">
        <title>Newsletter</title> 
        <desc>Link zum Newsletter</desc> 
        <g> 
          <g> 
            <path d="M481.64,205.12l-123-90.7c-8.3-6.3-21.9-5.2-28.1,4.2c-6.3,8.3-5.2,21.9,4.2,28.1l103.1,76l-192.9,148.2l-191.8-148.3
            l100.9-75.9c9.4-6.3,10.4-18.8,4.2-28.1c-6.3-9.4-18.8-10.4-28.1-4.2l-122,91.7c-5.9,3.9-8.5,10.3-8.1,16.8c0,0.4,0,0.8,0,1.1
            v245.9c0,14.3,10.4,20.8,20.8,20.8h448.1c18.4,0,22.9-8.6,22.9-20.8v-245.9C491.84,215.22,483.94,206.62,481.64,205.12z
            M41.74,266.52l107.3,82.6l-107.3,80.5C41.74,429.62,41.74,266.52,41.74,266.52z M81.74,450.12l101.7-75l49,37.5
            c7.3,5.2,17.7,5.2,25,0l49-38.6l101.4,76.1H81.74z M449.14,430.32l-108.4-81.3l108.4-83.4V430.32z"></path> <path d="M167.84,209.42l63.6,56.3c11.5,9.3,23.3,4.2,27.1,1l63.6-57.3c8.3-8.3,9.4-20.8,2.1-29.2s-20.8-9.4-29.2-2.1l-29.2,25.5
            V21.92c0-11.5-9.4-20.8-20.8-20.8s-20.8,9.4-20.8,20.8v181.8l-29.2-25.5c-8.3-7.3-21.9-6.3-29.2,2.1S159.44,202.12,167.84,209.42z">
            </path> 
          </g> 
        </g>
      </svg>
      <b>Newsletter</b>
    </a>
  </li>
</ul>

额外说明 #

• <a>标签添加inline-flex和align-items: center，既能让SVG和文本垂直对齐，又能确保<a>的交互区域完全包裹内容，不会出现间隙导致hover失效。
• 移除重复类名可避免样式选择器混乱，让代码更整洁。

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