Блог

Главная - Вопросы по программированию - как остановить анимацию автопрокрутки при наведении курсора в css?

как остановить анимацию автопрокрутки при наведении курсора в css?

#html #css

#HTML #css

Вопрос:

Я новичок и впервые использую анимацию и преобразование. Я пытаюсь остановить анимацию при наведении курсора мыши на «some text here», но я не получаю надлежащего вывода, возможно, из-за неточного или неправильного размещения amp;: hover пожалуйста, помогите решить эту проблему.

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

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

@keyframes autoscroll {
  amp;: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>

Ответ №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>