悬停时更改svg的颜色

Question

I have two svg items, one for a + sign and one for a minus sign. I want to turn them both white on hover, but it doesn't work, here is the 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> 

Why is it not working and how can I turn them white on hover?

Answer 1

You need to change the css selection a bit for it to work:

 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>