html - 为什么这个悬停不触发文本动画？

Question

尝试在只允许内部 CSS 的 CMS 程序中添加悬停。请注意，虽然没有 head 标签，但 CMS 会识别标签并自动将它们放在 .

我已经尝试导出为 html 来解决这个问题，但到目前为止没有成功。通过将静止状态放置为 H1 并将悬停状态放置为 div 类和 ID，尝试使用层次结构。这将通过运行 html5 的 EKTRON CMS 使用，无法访问 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;
}