如何使空白区域可悬停？

Question

当鼠标悬停在中间的空白处时，X 悬停不起作用。

这是如何解决的，以便将鼠标悬停在空白区域上会导致 svg 变为绿色？

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>

Answer 1

之前：

.exitHover:hover {
      fill: green;
}

之后：

button:hover .exitHover {
  fill: green;
}