jquery - 使用 CSS 在悬停时循环浏览单词列表 |有暂停和点击状态？

Question

我一直在关注 Marry Lou 关于悬停时骑自行车图像的教程:

http://tympanus.net/codrops/2012/05/09/how-to-create-a-fast-hover-slideshow-with-css3/

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

到目前为止，我已经达到了可以使用 jsfiddle 实现相同效果的地步，但我不知道这是否是最佳实践，因为当所有它们终于完成了(注意它最终只是停止循环)。

fiddle : https://jsfiddle.net/XavierTheGreat/v1vvxxm4/2/

HTML

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

CSS

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

第一次运行时它看起来也很丑陋，同时显示所有文本。有没有办法:

1. 只显示一个开始循环的词？
2. 悬停时悬停状态是否相互独立且不重叠？
3. 继续循环直到用户将鼠标移开，但是当该区域再次悬停时它会恢复吗？我不希望它留在空白处，一个词应该始终可见，无论它是否悬停在上面。

这可能吗？

Answer 1

您的代码有几个错误，您在一处使用了 img 而不是 .swapme。 检查下面提到的工作片段。

片段

.hs-wrapper .swapme {
  top: 0px;
  left: 0px;
  height: 25%;
  width: 25%;
  text-align: center;
  position: absolute;
  animation: showMe 0.8s linear infinite 0s forwards;
  animation-play-state: paused;
  background-color: white;
}
.hs-wrapper {
  height: 25%;
  width: 25%;
}
.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 .swapme:nth-child(4) {
  animation-delay: 3s;
  z-index: 6;
}
.hs-overlay {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 25%;
  height: 25%;
  opacity: 0;
  z-index: 500;
  background: rgba(0, 0, 0, 0.6);
  //box-shadow: 0 0 0 0 rgba(255,255,255,0.3) inset;
  pointer-events: none;
  transition: all 0.3s alternate;
  text-align: center;
}
.hs-wrapper:hover .hs-overlay {
  opacity: 0.8;
  //box-shadow: 0 0 0 5px rgba(255,255,255,0.3) inset;

}

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