html - 悬停在css中时如何停止自动滚动动画？

Question

我是初学者，也是第一次使用动画和转换。当我将鼠标悬停在“此处的一些文本”上时，我试图停止动画，但我没有得到正确的输出，可能是因为 &:hover 的位置不准确或错误，请帮助解决这个问题。

#contentwrapper {
  height: 190px;
  background-color: tomato;
  overflow-y: hidden;
}

#inner-wrapper {
  animation: autoscroll 10s linear infinite;
}

@keyframes autoscroll {
  &:hover {
    animation-play-state: paused;
  }
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(0, -90%, 0);
  }
}

<div id="contentwrapper">
  <div id="inner-wrapper">
    <div><a href="#">some text here</a></div>
    <div><a href="#">some text here</a></div>
    <div><a href="#">some text here</a></div>
    <div><a href="#">some text here</a></div>
    <div><a href="#">some text here</a></div>
    <div><a href="#">some text here</a></div>
    <div><a href="#">some text here</a></div>
    <div><a href="#">some text here</a></div>
  </div>
</div>

标签： htmlcss

Answer 1

您可以:hover在元素本身上使用：

#contentwrapper {
  height: 190px;
  background-color: tomato;
  overflow-y: hidden;
}
#inner-wrapper {
  animation: autoscroll 10s linear infinite;
}

#inner-wrapper:hover{
    animation-play-state: paused;
}


@keyframes autoscroll {
  from { 
    transform: translate3d(0,0,0);
  }
  to {
    transform: translate3d(0,-90%,0);
  }
}

<div id="contentwrapper">
  <div id="inner-wrapper">
    <div><a href="#">some text here</a></div>
    <div><a href="#">some text here</a></div>
    <div><a href="#">some text here</a></div>
    <div><a href="#">some text here</a></div>
    <div><a href="#">some text here</a></div>
    <div><a href="#">some text here</a></div>
    <div><a href="#">some text here</a></div>
    <div><a href="#">some text here</a></div>

  </div>
</div>