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>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

Before:

.exitHover:hover {
      fill: green;
}

After:

button:hover .exitHover {
  fill: green;
}