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>

悬停时更改svg的颜色

1 个答案: