为鼠标悬停添加时间延迟

Question

我创建了这个简单的 html 和 CSS 以在鼠标悬停在按钮上时显示隐藏的 div。现在我想在隐藏的 div 的显示状态更改为 Display 块之后和 return 到其原始状态（鼠标移开时显示 none 之前）添加 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>

Answer 1

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

Answer 2

使用不透明度和过渡持续时间 :

使用不透明度隐藏除法

并使用 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>

为鼠标悬停添加时间延迟

Add time delay to mouse hovering

html

css

hover

mouseover

使用不透明度和过渡持续时间 :