为鼠标悬停添加时间延迟答案

【问题标题】：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解决方案，看看它是否有帮助？

标签： html css hover mouseover

【解决方案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;
}

【讨论】：