Question

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

我已经尝试导出为html来解决该问题，但到目前为止还没有运气。通过将休息状态设为H1并将悬停状态设为div类和ID，使用层次结构进行了尝试。这将通过运行html5且无法访问js的EKTRON CMS使用。

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;
}

为什么悬停不触发文本动画？

1 个答案: