Question

不确定如何做到这一点，但是我有一个SVG内联，在定位标记中有一些文本包装器。但是，将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>

Answer 2

svg的填充颜色默认显示为#111，因此您需要在CSS中更改svg正常状态的填充颜色。我不知道您是否打算将文本设置为白色，但显然可以根据需要进行更改。

a, a svg {
	color: #fff;
	fill: #FF0000;
}

a:hover {
	color: #111;
}

a:hover svg {
	fill: #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 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>

带有在线SVG和文本的锚定悬停

2 个答案: