相关疑难解决方法(0)

我正在尝试实现仅限CSS的滑块.
当hover向左和向右箭头时,滑块必须滑动.当然.

我尝试了一些东西animation-play-state,animation-fill-mode(以保持位置),animation-direction但我不能完全使它工作.

• 从箭头开始animation-play-state: paused,hover将其更改为running.
• 在hover右箭头上,一切都很好.我们可以盘旋,离开,再次盘旋.
• 但是,只要我hover的左箭头(更改animation-direction到reverse),它的破碎.

简化代码段:

.wrapper {
  overflow: hidden;
  position: relative;
  width: 500px;
}

.arrows {
  z-index: 2;
  position: absolute;
  top: 0;
  height: 100%;
  background: #ddd;
  opacity: 0.66;
}

.arrows:hover {
  opacity: 1;
}

.arrow-l {
  left: 0;
}

.arrow-r {
  right: 0;
}

.sliding {
  height: 160px;
  width: 2000px;
  background: linear-gradient(to …

我的网站上有一个动画,从width: 100px to 800px悬停时开始.

但是当它悬停时,它只会进入正常位置而没有动画.

我怎么能得到它所以动画会像悬停时那样回到悬停状态？

我只找到过渡的解决方案,但我需要它用于动画.

<div id="blackbox"/>
<div id="blacktxt">
Navigation
</div>

看这里