为鼠标悬停添加时间延迟

问题描述

我创建了这个简单的 html 和 CSS 来在鼠标悬停在按钮上时显示隐藏的 div。现在，我想在隐藏 div 的显示状态更改为 display 块之后和返回其原始状态（鼠标移开时不显示）之前为其添加 2S 延迟。谢谢。这是我的代码，

<!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>

解决方法

使用不透明度和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>

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;
}

hover html mouseover