Jquery 使用CSS循环浏览悬停时的单词列表，并使用暂停和单击状态？

我一直在关注Mary Lou关于hover上循环图像的教程：

非常好，但是我想做的是只使用文本做完全相同的事情。也就是说，一个单词就在那里，当用户将鼠标悬停在它上面时，它会循环浏览不同的单词或短语

到目前为止，我已经达到了使用JSFIDLE可以实现某种相同效果的程度，但我不知道这是否是最佳实践，因为当所有这些操作最终完成时，这些单词不会保持其“悬停”功能（请注意，它最终只是停止循环）

Jfiddle：

HTML

当第一次运行时，所有文本同时出现时，它看起来也很难看。有没有办法：

只显示一个开始循环的单词

悬停时，悬停状态是否分开且不相互重叠

继续循环，直到用户将鼠标移开，但是当该区域再次悬停时，它会恢复吗？我不希望它被留在一个空白处，一个词应该始终可见，无论它是否悬停

---

这可能吗？

您的代码有几个错误，您在一个位置使用了

img

，而不是

.swapme

。 检查下面提到的工作代码段

片段

.hs wrapper.swapme{
顶部：0px；
左：0px；
身高：25%；
宽度：25%；
文本对齐：居中；
位置：绝对位置；
动画：showMe 0.8s线性无限向前；
动画播放状态：暂停；
背景色：白色；
}
.hs包装纸{
身高：25%；
宽度：25%；
}
.hs包装器：悬停.swapme{
动画播放状态：运行；
}
@关键帧向我展示{
0% {
可见性：隐藏；
z指数：100；
}
12.5% {
能见度：可见；
z指数：100；
}
25% {
可见性：隐藏；
z指数：0；
}
100% {
可见性：隐藏；
z指数：0；
}
}
.hs包装器.swapme:n个孩子（1）{
z指数：9；
}
.hs包装器.swapme:第n个孩子（2）{
动画延迟：1s；
z指数：8；
}
.hs包装器.swapme:第n个孩子（3）{
动画延迟：2s；
z指数：7；
}
.hs包装器.swapme:第n个孩子（4）{
动画延迟：3s；
z指数：6；
}
.hs叠加{
位置：绝对位置；
顶部：0px；
左：0px；
宽度：25%；
身高：25%；
不透明度：0；
z指数：500；
背景：rgba（0,0,0,0.6）；
//盒影：0 rgba（255255,0.3）插图；
指针事件：无；
过渡：所有0.3秒交替；
文本对齐：居中；
}
.hs包装器：悬停.hs覆盖{
不透明度：0.8；
//盒影：0 0 5px rgba（255255,0.3）插图；
}

大胆的
戏剧性的
已订婚的
无畏的
我是

这太棒了！你搞定了！非常感谢。如果我想添加更多的短语或单词，我是否只需添加另一个div和第n个child？你又一次摇滚了@XavierTheGreat：是的，你不断为每个额外的单词添加相应的div和第n个子css，并尝试优化动画时间，因为随着单词的增加，0.8秒的动画时间将开始显得太快。太棒了！非常感谢！嘿，我又一次注意到，在尝试添加三个单词后，一些单词不再出现。有什么观察或猜测吗？这里是JSFIDLE btw，我对时间进行了调整，但仍然无法让它显示所有的时间

    <div class="hs-wrapper">

  <div class="swapme" alt="div1">
    <h1>
  BOLD
  </h1>
  </div>

  <div class="swapme" alt="div2">
    <h1>
  DRAMATIC
  </h1>
  </div>

  <div class="swapme" alt="div3">
    <h1>
ENGAGED
</h1>
  </div>

  <div class="swapme" alt="div4">
    <h1>
FEARLESS
</h1>
  </div>



  <div class="hs-overlay">
    <span><strong>I AM</strong></span>
  </div>

</div>

.hs-wrapper .swapme {
  top: 0px;
  left: 0px;
  position: absolute;
  animation: showMe .8s linear infinite 0s forwards;
  animation-play-state: paused;
}

.hs-wrapper:hover .swapme {
  animation-play-state: running;
}

@keyframes showMe {
  0% {
    visibility: hidden;
    z-index: 100;
  }
  12.5% {
    visibility: visible;
    z-index: 100;
  }
  25% {
    visibility: hidden;
    z-index: 0;
  }
  100% {
    visibility: hidden;
    z-index: 0;
  }
}

.hs-wrapper .swapme:nth-child(1) {
  z-index: 9;
}

.hs-wrapper .swapme:nth-child(2) {
  animation-delay: 1s;
  z-index: 8;
}

.hs-wrapper .swapme:nth-child(3) {
  animation-delay: 2s;
  z-index: 7;
}

.hs-wrapper img:nth-child(4) {
  animation-delay: 3s;
  z-index: 6;
}