I'm trying to get the hover to work on the X Close Button.

The hover works stand alone, by itself:

Seen Here: https://jsfiddle.net/02ke4r5v

And in the snippet I provided.

When I place it in my code it does not work.

Seen Here: https://jsfiddle.net/hnba7z0d/

.exit {
  top: auto;
  bottom: -47.63px;
  margin: auto;
  right: 0;
  left: 0;
  width: 47.63px;
  height: 47.63px;
  cursor: pointer;
  border: none;
  background: none;
  padding: 0;
  border-radius: 50%;
  animation: fadeInExit 2s forwards 0s;
  opacity: 0;
  pointer-events: none;
  clip-path: circle(50%);
}

@keyframes fadeInExit {
  99% {
    pointer-events: none;
  }
  100% {
    pointer-events: initial;
    opacity: 1;
  }
}

.exit:hover .exitHover {
  fill: green;
}

<button class="exit" type="button" aria-label="Close">
  <svg 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：

Your problem is that you are styling the original exit SVG on hover. That particular one should work.

However all the other buttons that use <svg><use> will not work because when you hover over them, the mouse event doesn't get passed through to the original one (that use points to).

Instead, you should attach the hover rule to the <svg><use> elements instead. You can apply a style to them, and it will inherited by the original used instance.

Show code snippet

.exit {
  width: 47.63px;
  height: 47.63px;
  border: none;
  background: none;
  padding: 0;
}


.exit:hover svg {
  fill: green;
}

<p>original</p>
<button class="exit" type="button" aria-label="Close">
  <svg width="100%" height="100%" viewBox="-144 -144 288 288">
    <g id="exit">
      <title>exit</title>
      <circle class="exitCircle" cx="0" cy="0" r="144" fill="transparent"/>
      <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>

<p>&lt;use&gt;</p>
<button class="exit" type="button" aria-label="Close">
  <svg width="100%" height="100%" viewBox="-144 -144 288 288">
    <use href="#exit" />
  </svg>
</button>

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

However if you try this, you will see that it still doesn't work. That's because the value of fill is being over-ridden by the fill="red" attribute that the path already has.

The solution is to remove the fill="red" attribute and give that path a default red style using CSS.

.exit svg {
  fill: red;
}

.exit:hover svg {
  fill: green;
}

.exit {
  width: 47.63px;
  height: 47.63px;
  border: none;
  background: none;
  padding: 0;
}


.exit svg {
  fill: red;
}

.exit:hover svg {
  fill: green;
}

<p>original</p>
<button class="exit" type="button" aria-label="Close">
  <svg width="100%" height="100%" viewBox="-144 -144 288 288">
    <g id="exit">
      <title>exit</title>
      <circle class="exitCircle" cx="0" cy="0" r="144" fill="transparent"/>
      <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)" />
    </g>
  </svg>
</button>

<p>&lt;use&gt;</p>
<button class="exit" type="button" aria-label="Close">
  <svg width="100%" height="100%" viewBox="-144 -144 288 288">
    <use href="#exit" />
  </svg>
</button>

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

CodePudding user response：

First of all, try to visit this link [svg change color on hover]. It describes the solution that you may need.

Also, I am going to add the css of one button that I am using. When I hover on it the color is changed. Try to just use Button:hover and the css property of background-color.

button {
  background-color: red;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  float: right;
}

button:hover {
  background-color: #b91d19;
}

CodePudding user response：

Your code is working correctly.

jsfiddle

On the example of jsfiddle

.thePlay:hover svg{
  fill:green;
}

jsfiddle