Почему этот курсор не вызывает текстовую анимацию?

Question

Попытка добавить наведение в программе CMS, которая позволяет только внутренний CSS. Обратите внимание, что, хотя тег заголовка отсутствует, CMS распознает теги и автоматически помещает их в.

Я пытался экспортировать в формате html, чтобы решить эту проблему, но пока что безуспешно. Пробовал использовать иерархию, поместив состояние покоя как H1 и состояние при наведении как класс div и как ID. Это должно использоваться через EKTRON CMS с html5 без доступа к 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>

Я ожидал, что текст анимируется, но текст остается статичным.

Answer 1

В эффекте наведения мыши вы используете селектор :nth-last-child(even).Это будет выбирать каждый четный элемент, начиная с последнего.То есть он будет иметь первый нечетный элемент <span>ducation</span>, а первый - четный <span>E</span>.Вместо этого вы хотели бы использовать :nth-child(even) для выбора с самого начала.

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