我在一行中有一个单词滑块列表，当我将鼠标悬停在动画暂时暂停的单词上时，我想要

Question

我在一行中有一个单词滑块列表，每个客户都可以点击并打开其他页面，我想当我将鼠标悬停在单词上时动画暂时暂停请帮我解决这个问题？

the exemple

<ul>
      <li className="text">Client</li>
      <li>exemple</li>
      <li className="text">Client</li>
      <li>exemple</li>
      <li className="text">Client</li>
      <li>exemple</li>
    </ul>


 
@keyframes slide {
  0% {transform: translateX(0%);}
  100% {transform: translateX(-180%);}
 }
>div ul{
  display: flex;
  justify-content: space-between;
  align-items: center;
  list-style-type: none;
  white-space: nowrap;
  transition: all 1s ease;
  width: 100%;
  animation: slide 20s linear infinite;
}

Answer 1

简单地说，您可以在悬停时暂停动画，然后点击每个客户端文本到新选项卡

@keyframes slide {
  0% {transform: translateX(0%);}
  100% {transform: translateX(-180%);}
 }
ul{
  display: flex;
  justify-content: space-between;
  align-items: center;
  list-style-type: none;
  white-space: nowrap;
  transition: all 1s ease;
  width: 100%;
  animation: slide 20s linear infinite;
}
ul:hover{
  -webkit-animation-play-state:paused;
  -moz-animation-play-state:paused;
  -o-animation-play-state:paused;
  animation-play-state:paused;
  cursor: pointer;
}

<ul>
  <li><a href="www.google.com" target="_blank" className="text">Client</a></li>
  <li>exemple</li>
  <li className="text"><a href="www.google.com" target="_blank">Client</a></li>
  <li>exemple</li>
  <li className="text"><a href="www.google.com" target="_blank">Client</a></li>
  <li>exemple</li>
</ul>

我在一行中有一个单词滑块列表，当我将鼠标悬停在动画暂时暂停的单词上时，我想要

I have a list of words slider in one line and I want when I hover over the word the animation paused temporarily

javascript

css

reactjs

styled-components