javascript - 悬停时更改 svg 的颜色

Question

我有两个 svg 元素，一个用于 + 号，一个用于减号。我想在悬停时将它们都变成白色，但它不起作用，这是 html:

zoom-control svg g path:hover {
      color: white;
    }

<div>
  <zoom-control class="first-btn" :isFirst="true" :handler="attachZoomInHandler">
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
      <g fill="none" fill-rule="evenodd" stroke="#00A6CE" stroke-linecap="round" stroke-width="2">
        <path d="M18 12H6M12 18V6"/>
      </g>
    </svg>
  </zoom-control>
  <zoom-control class="last-btn" :isLast="true" :handler="attachZoomOutHandler">
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
      <path fill="none" fill-rule="evenodd" stroke="#00A6CE" stroke-linecap="round" stroke-width="2" d="M18 12H6"/>
    </svg>
  </zoom-control>
</div>


    

为什么它不起作用？如何在悬停时将它们变为白色？

Answer 1

您需要稍微更改 css 选择才能使其正常工作:

zoom-control svg:hover path {
  stroke: white;
}

<div>
  <zoom-control class="first-btn" :isFirst="true" :handler="attachZoomInHandler">
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
      <g fill="none" fill-rule="evenodd" stroke="#00A6CE" stroke-linecap="round" stroke-width="2">
        <path d="M18 12H6M12 18V6"/>
      </g>
    </svg>
  </zoom-control>
  <zoom-control class="last-btn" :isLast="true" :handler="attachZoomOutHandler">
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
      <path fill="none" fill-rule="evenodd" stroke="#00A6CE" stroke-linecap="round" stroke-width="2" d="M18 12H6"/>
    </svg>
  </zoom-control>
</div>