html - 使用内联 SVG 和文本锚定悬停

Question

不确定如何完成此操作，但我有一个 SVG 内联，在 anchor 标记中包含一些文本包装器。但是当鼠标悬停在整个 anchor 上时，SVG 并没有改变颜色，只是文本。将鼠标悬停在 SVG 上后，它会改变颜色，但我想知道如何触发整个悬停状态。

CSS:

    a, a svg {
    color: #fff;
    }

    a:hover {
      color: #111;
    }

    a svg:hover { 
      fill: #111;
    }

HTML:

<a href="https://facebook.com/username" target="_blank">FACEBOOK 
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="30px" height="30px" viewBox="0 0 30 30" enable-background="new 0 0 30 30" xml:space="preserve">
   <path d="M17.252,11.106V8.65c0-0.922,0.611-1.138,1.041-1.138h2.643V3.459l-3.639-0.015
    c-4.041,0-4.961,3.023-4.961,4.961v2.701H10v4.178h2.336v11.823h4.916V15.284h3.316l0.428-4.178H17.252z"/>
  </svg>
</a>

我本可以发誓，在不确定为什么它在这里不起作用之前，我曾在其他地方使用过它。

Answer 1

给路径一个属性fill="currentColor" , 它将继承其父项的填充颜色。

a {
    color: #fff;
}

a:hover {
  color: #111;
}

<a href="https://facebook.com/username" target="_blank">FACEBOOK 
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="30px" height="30px" viewBox="0 0 30 30" enable-background="new 0 0 30 30" xml:space="preserve">
   <path fill="currentColor" d="M17.252,11.106V8.65c0-0.922,0.611-1.138,1.041-1.138h2.643V3.459l-3.639-0.015
    c-4.041,0-4.961,3.023-4.961,4.961v2.701H10v4.178h2.336v11.823h4.916V15.284h3.316l0.428-4.178H17.252z"/>
  </svg>
</a>