CODEWITHSUNDEEP
htmlcss
ItsChrisOfficial
ItsChrisOfficial

Reputation: 13

Why doesnt this hover trigger text animation?

Trying to add a hover in a CMS program that only allows internal css. Please note that, while there is no head tag, the CMS recognizes tags and automatically places them in the .

I've tried exporting as html to work through the issue but so far no luck. Tried using hierarchy by placing the resting state as H1 and hover state as a div class and as an ID. This is to be used through EKTRON CMS running html5 with no accessibility to js.

body {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

h1 {
  margin: 0;
  padding: 0;
}

h1 span {
  display: inline-flex;
  color: #1C7CB3;
}

h1 span:nth-child(even) {
  overflow: hidden;
  transition: ease 0.5s;
  color: purple;
  letter-spacing: -1em;
}

h1:hover span:nth-last-child(even) {
  letter-spacing: 0;
}
<h1>
  <span>F</span><span>lorida</span>
  <span>I</span><span>nstitute</span>
  <span></span><span>of</span>
  <span>E</span><span>ducation</span>
</h1>

I expected the text to animate but the text stays static.

Upvotes: 1

Views: 63

Answers (1)

Xweque
Xweque

Reputation: 643

In the hover effect you are using the :nth-last-child(even) selector. This will select every even element starting from the last. That is it will have it's first odd element being <span>ducation</span> and it's first even being <span>E</span>. You instead would want to use the :nth-child(even) to select from the start.

h1:hover span:nth-child(even)
{ 
    letter-spacing: 0;
}

Upvotes: 1

Related Questions