Css优先级

Question

我有一个SVG。当用户将鼠标悬停在它上面时，我想更改路径上的填充颜色。有人可以解释为什么这行不通吗？

svg:hover {
  fill: blue;
}

<svg width="0" height="0" class="hidden">
  <symbol viewBox="0 0 142 142" xmlns="http://www.w3.org/2000/svg" id="twitter">
    <title>twitter</title>
    <g fill="none" fill-rule="evenodd">
      <path d="M71.5 0C115.23 0 142 36.15 142 71.217c0 35.066-26.77 69.484-70.5 70.783C27.77 143.299 0 106.629 0 71S27.77 0 71.5 0z" fill="#AEB2B4"></path>
      <path d="M109 47.34a31.017 31.017 0 0 1-8.956 2.462 15.689 15.689 0 0 0 6.857-8.658A31.142 31.142 0 0 1 97 44.94 15.55 15.55 0 0 0 85.616 40c-8.61 0-15.593 7.01-15.593 15.652 0 1.227.139 2.421.406 3.567-12.958-.652-24.448-6.883-32.14-16.356a15.63 15.63 0 0 0-2.111 7.87 15.667 15.667 0 0 0 6.936 13.028 15.437 15.437 0 0 1-7.062-1.96V62c0 7.584 5.376 13.909 12.508 15.346-1.307.36-2.688.55-4.107.55-1.007 0-1.983-.097-2.934-.28 1.984 6.218 7.74 10.743 14.565 10.87a31.209 31.209 0 0 1-19.366 6.7c-1.256 0-2.5-.073-3.718-.219A43.983 43.983 0 0 0 56.9 102c28.68 0 44.364-23.85 44.364-44.535 0-.678-.015-1.354-.046-2.024A31.687 31.687 0 0 0 109 47.34z"
        fill="#FFF" fill-rule="nonzero"></path>
    </g>
  </symbol>
</svg>

<svg class="icon">
  <use xlink:href="#twitter"></use>
</svg>

Answer 1

Css优先级

在元素和svg svg：hover上定义填充时。
路径元素内联样式的优先级高于svg上定义的样式。

Answer 2

我认为您需要匹配svg元素，例如：

path:hover {
    fill: blue;
}

Answer 3

svg:hover {
  fill: blue;
}

svg {
  fill: #AEB2B4;
}

<svg width="0" height="0" class="hidden">
  <symbol viewBox="0 0 142 142" xmlns="http://www.w3.org/2000/svg" id="twitter">
    <title>twitter</title>
    <g>
      <path d="M71.5 0C115.23 0 142 36.15 142 71.217c0 35.066-26.77 69.484-70.5 70.783C27.77 143.299 0 106.629 0 71S27.77 0 71.5 0z""></path>
      <path d="M109 47.34a31.017 31.017 0 0 1-8.956 2.462 15.689 15.689 0 0 0 6.857-8.658A31.142 31.142 0 0 1 97 44.94 15.55 15.55 0 0 0 85.616 40c-8.61 0-15.593 7.01-15.593 15.652 0 1.227.139 2.421.406 3.567-12.958-.652-24.448-6.883-32.14-16.356a15.63 15.63 0 0 0-2.111 7.87 15.667 15.667 0 0 0 6.936 13.028 15.437 15.437 0 0 1-7.062-1.96V62c0 7.584 5.376 13.909 12.508 15.346-1.307.36-2.688.55-4.107.55-1.007 0-1.983-.097-2.934-.28 1.984 6.218 7.74 10.743 14.565 10.87a31.209 31.209 0 0 1-19.366 6.7c-1.256 0-2.5-.073-3.718-.219A43.983 43.983 0 0 0 56.9 102c28.68 0 44.364-23.85 44.364-44.535 0-.678-.015-1.354-.046-2.024A31.687 31.687 0 0 0 109 47.34z"
        fill="#FFF" fill-rule="nonzero"></path>
    </g>
  </symbol>
</svg>

<svg class="icon">
  <use xlink:href="#twitter"></use>
</svg>

无法更改SVG填充颜色

3 个答案:

Css优先级