鼠标悬停时间 CSS HTML [重复]

Posted 2023-05-08

【中文标题】鼠标悬停时间 CSS HTML [重复]

【英文标题】：Mouseover hover time CSS HTML [duplicate]

【发布时间】：2015-12-20 12:11:04

【问题描述】：

我的问题是我希望很容易。我有鼠标悬停显示一些文本。

我的问题是，在鼠标消​​失后，有没有机会让这个悬停持续几秒钟？我只能使用html+css。

【问题讨论】：

到目前为止你尝试了什么？

把你的代码放在你试过的地方。

不可能的哥们。它们会立即发生。

你需要使用Jquery或者javascript

【参考方案1】：

这不是一个完美的答案。因为，完美的答案是否。顺便说一句，您可以延迟过渡。

div 
  display: inline-block;
  padding: 5px;
  margin: 10px;
  border: 1px solid #ccc;
  transition: 0s background-color;
  transition-delay: 1s;

div:hover 
  background-color: red;
  transition-delay: 0s;

<div>Hover Me</div>

来源：http://dabblet.com/gist/1498446

【参考方案2】：

.example 
transition: 0s;  /* zero it if you don't want to add a fade */
transition-delay:2s; /* delay will last for 2 seconds */


.example:hover 
background-color:blue;
transition-delay:0s; /* the delaying happens here */

【讨论】：

嗯，你说对了一部分。请问你能改正吗？

@PraveenKumar 很高兴我能帮上忙！