使用CSS |在Hover上循环显示单词列表暂停和点击状态？

Question

我一直在跟随Marry Lou关于悬停的骑行图像的教程：

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

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

到目前为止，我已经达到了使用jsfiddle可以达到某种相同效果的程度，但我不知道这是否是最好的做法，因为这些词语不能保持＆＃ ＃34;悬停＆＃34;最终完成所有这些功能后的功能（注意最终它会停止循环）。

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