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

Question

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

这是我现在的动画。

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

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

Answer 1

您可以使用像这样的关键帧动画:

button:hover {
  animation: hideMouse 4s;

}

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