css - CSS - 几秒钟后使鼠标指针消失

Question

目标是在我将鼠标悬停在视频（例如 youtube）上一段时间后隐藏我的鼠标指针，因为我需要使用 css。

这是我现在的动画。

  #container{
   &:hover{
     cursor: pointer;
    .video-controls-bar{
        opacity: 1;
    }
    .bottom {
      margin-bottom: 44px;
    }
   }
  }

这是我的控制栏，当我将鼠标悬停时，我的 div 底部会出现，但现在我需要在几秒钟后隐藏鼠标。提前致谢

标签： csssasscss-animations

Answer 1

您可以使用如下关键帧动画：

button:hover {
  animation: hideMouse 4s;

}

@keyframes hideMouse {
  0% {
    cursor: pointer;
  }
  99% {
    cursor: pointer;
  }
  100% {
    cursor: none;
  }
}