为鼠标悬停添加时间延迟
Posted
技术标签:
【中文标题】为鼠标悬停添加时间延迟【英文标题】：Add time delay to mouse hovering 【发布时间】：2021-08-17 06:51:29 【问题描述】：我创建了这个简单的 html 和 CSS，以便在鼠标悬停在按钮上时显示隐藏的 div。现在我想在它的显示状态更改为显示块之后和返回到它的原始状态之前添加 2S 延迟到隐藏的 div，即鼠标移出时不显示。谢谢。这是我的代码，
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.content
display: none;
.btn:hover + .content
display: block;
</style>
</head>
<body>
<div>
<button type="button" class="btn">Hover Me</button>
<div class="content">
<h1>Hello</h1>
</div>
</div>
</body>
</html>
【问题讨论】：
你能检查this解决方案，看看它是否有帮助？ 【参考方案1】：使用不透明度和transition-duration：
使用不透明度隐藏分区
并使用 transition-duration 设置 2 秒的过渡
这里是示例：（运行片段代码）
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.content
background-color: #4CAF50; /* Green */
border: none;
color: white;
height: 90px;
width: 90px;
opacity: 0;
transition-duration: 2s;
.btn:hover + .content
opacity: 1;
</style>
</head>
<body>
<button type="button" class="btn">Hover Me</button>
<div class="content">
</div>
</body>
</html>【讨论】：
【参考方案2】：How can I delay a :hover effect in CSS?
你要找的属性是transition和transition-delay。
div
transition: 0s background-color;
div:hover
background-color:red;
transition-delay:1s;
【讨论】：
以上是关于为鼠标悬停添加时间延迟的主要内容，如果未能解决你的问题，请参考以下文章