css 限制html中的悬停效果时间

6yjfywim 于 2022-12-01 发布在其他

关注(0)|答案(4)|浏览(169)

我怎样才能限制html中的悬停效果时间呢，我试着做了一个代码，像下面这样，让悬停效果在一段时间后消失

<div class="hover">Hover me!</div>

<style>

.hover {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  background: green;
}

.hover:active {
  background: red;
  // maximum hover time of 3 seconds
}

</style>

请帮助我与主要代码如上

css

来源：https://stackoverflow.com/questions/74627757/limiting-the-hover-effect-time-in-html

4条答案

按热度按时间

7gyucuyw1#

您可以在悬停时启动动画并指定时间范围。

赞(0）回复(0）举报 2022-12-01

fkvaft9z2#

第一个

赞(0）回复(0）举报 2022-12-01

b09cbbtk3#

你需要这样做：<div class="hover">Hover me!</div><style>.hover { transition-property: background; transition-delay: 3s; background: green;}.hover:hover { background: red;}</style>

赞(0）回复(0）举报 2022-12-01

nom7f22z4#

可以使用关键帧动画：
第一个
如果你不想要即时切换，你可以删除99%的部分。还有，我把:active改为:hover，我想这就是你的意思？

赞(0）回复(0）举报 2022-12-01