Applying hover to only the X not the circle

HTML & CSS
1

How would I be able to apply the hover transition to only the X and not the circle?

How would that be done in the code? https://jsfiddle.net/c2sah0x6/

Only the X should change color on hover, not the circle.

.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 0s forwards 0s;
  opacity: 0;
  pointer-events: none;
  clip-path: circle(50%);
}

@keyframes fadeInExit {
  99% {
    pointer-events: none;
  }

  100% {
    pointer-events: initial;
    opacity: 1;
  }
}

.exit svg {
  fill: red;
  transition: fill 3s ease;
}

.exit:hover svg {
  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)"/>
          </g>
        </svg>
      </button>
2

You can’t. OK, maybe you can but I don’t know of an obvious way to have two colors on one path.

The easy way is to split the symbol into two paths - one for the circle, and one for the x. Then set the fill color for each separately.

2 Likes
3

I did that here: https://jsfiddle.net/yftr5xu0/

Next: How do I remove one of these hovers, where the hover will continue to stay working?

.exit:hover svg {
  fill: green;
}

.exitCircle:hover svg{
  fill: green;
}

Code:

.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 0s forwards 0s;
  opacity: 0;
  pointer-events: none;
  clip-path: circle(50%);
}

@keyframes fadeInExit {
  99% {
    pointer-events: none;
  }

  100% {
    pointer-events: initial;
    opacity: 1;
  }
}

.exit svg {
  fill: red;
  transition: fill 3s ease;
}

.exit:hover svg {
  fill: green;
}

.exitCircle:hover svg{
  fill: green;
}

<button class="exit" type="button" aria-label="Close">
  <svg width="100%" height="100%" viewBox="-144 -144 288 288">
    <g id="exit" transform="rotate(45)">
      <title>exit</title>
      <path class="exitHover" d="M-143,0A143,143,0,1,1,143,0A143,143,0,0,1,-143,0" fill="gold" />
      <circle class="exitCircle" r="113" />
      <path class="exitHover" fill="blue" d="M-15,-112A113,113,0,0,0,-112,-15H-15ZM-112,15A113,113,0,0,0,-15,112V15ZM15,112A113,113,0,0,0,112,15H15ZM112,-15A113,113,0,0,0,15,-112V-15Z" />
    </g>
  </svg>
</button>
4

My brain doesn’t understand that sentence :slight_smile:

If you add a class to the paths then you can set their transition hover separately for each.

e.g.


.ex1,.ex2{
  transition:all 3s ease;
}

.exit:hover svg{
  fill:black;
}
.exit:hover svg .ex1 {
  fill: teal
}
.exit:hover svg .ex2 {
  fill: cyan;
}


  <svg width="100%" height="100%" viewBox="-144 -144 288 288">
    <g id="exit" transform="rotate(45)">
      <title>exit</title>
      <path class="exitHover ex1" d="M-143,0A143,143,0,1,1,143,0A143,143,0,0,1,-143,0" fill="gold" />
      <circle class="exitCircle" r="113" />
      <path class="exitHover ex2" fill="blue" d="M-15,-112A113,113,0,0,0,-112,-15H-15ZM-112,15A113,113,0,0,0,-15,112V15ZM15,112A113,113,0,0,0,112,15H15ZM112,-15A113,113,0,0,0,15,-112V-15Z" />
    </g>
  </svg>

I’ve no idea what effect you wanted but play around with the above format.:slight_smile:

2 Likes
5

Maybe jsfiddle was acting up, or I was doing too many things at once.

Works now: https://jsfiddle.net/t05x14bf/

.exit svg {
  fill: red;
  transition: fill 3s ease;
}

.exit:hover svg {
  fill: green;
}

Removed:

/*.exitCircle:hover svg{
  fill: green;
}*/
6

Using these tools I was able to remove: transform="rotate(45)"

Using this tool flattens the transform into the path: https://jakearchibald.github.io/svgomg/

First I opened up this svg inside the above tool.

<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="-144 -144 288 288">
   <path 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)"/>
</svg>

Which removed the transform attribute and flattened it into the svg path.

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

<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="-144 -144 288 288">
  <path d="M-101.116-101.116a143 143 0 1 1 202.232 202.232 143 143 0 0 1-202.232-202.232M68.589-89.803a113 113 0 0 0-137.178 0L0-21.213zM-89.803-68.589a113 113 0 0 0 0 137.178L-21.213 0zm21.214 158.392a113 113 0 0 0 137.178 0L0 21.213zM89.803 68.589a113 113 0 0 0 0-137.178L21.213 0z"/>
</svg>

Then I separated that 1 path string into 2 separate paths using the below tool.

Using this tool helps to separate the 1 path into 2 separate paths.
https://yqnn.github.io/svg-path-editor/

Then I updated the fiddle with the 2 new paths without transform in it.

https://jsfiddle.net/h8n0be3L/

 <svg width="100%" height="100%" viewBox="-144 -144 288 288">
    <g id="exit">
      <title>exit</title>
      <path class="exitHover" d="m-101.116-101.116a143 143 0 11202.232 202.232a143 143 0 01-202.232-202.232zzzz" fill="gold" />
      <circle cx="0" cy="0" r="113" />
      <path class="exitHover" fill="blue" d="m-101.116-101.116m169.705 11.313a113 113 0 00-137.178 0l68.589 68.59zm-158.392 21.214a113 113 0 000 137.178l68.59-68.589zm21.214 158.392a113 113 0 00137.178 0l-68.589-68.59zm158.392-21.214a113 113 0 000-137.178l-68.59 68.589z" />
    </g>
  </svg>
1 Like
7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.