When the mouse is hovered over the white space in-between the X hover is not working.
How is that fixed so that hovering over the white space causes the svg to change to green?
https://jsfiddle.net/Lu1bm5pf/
.exit {
margin: auto;
right: 0;
left: 0;
width: 47.63px;
height: 47.63px;
cursor: pointer;
border: none;
background: none;
padding: 0;
border-radius: 50%;
}
.exitHover:hover {
fill: green;
}<button class="exit" type="button" aria-label="Close">
<svg class="exitsvg" width="100%" height="100%" viewBox="-144 -144 288 288">
<g id="exit">
<title>exit</title>
<path class="exitHover" d="m-143 0a143 143 0 1 1 286 0 143 143 0 0 1 -286 0m128-112a113 113 0 0 0 -97 97h97zm-97 127a113 113 0 0 0 97 97v-97zm127 97a113 113 0 0 0 97 -97h-97zm97-127a113 113 0 0 0 -97 -97v97z" transform="rotate(45)" fill="red" />
</g>
</svg>
</button>>Solution :
Before:
.exitHover:hover {
fill: green;
}
After:
button:hover .exitHover {
fill: green;
}