如何使白色 space 可悬停？

Question

当鼠标悬停在白色 space 中间时，X 悬停不起作用。

如何解决这个问题，以便将鼠标悬停在白色 space 上导致 svg 变为绿色？

.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;
}

如何使白色 space 可悬停？

How to make white space hoverable?

css

svg

hover

whitespace