Javascript 如何在css悬停在显示为“无”的div上时添加延迟？

我的第一个div是一个简单的蓝色正方形，第二个div是一个带有

显示：无的简单红色正方形。将鼠标悬停在第一个按钮（蓝色按钮）上时，第二个按钮将显示文本和图像等。。但是我想要的是一个简单的延迟或滑动的效果（如果可能的话，但如果不是一个简单的延迟将是很酷的），我从2小时开始工作，但没有任何成功，请任何帮助

这是

这是我的代码：

<div class="first">
<div class="second">
    <h1 class="hover-title">Hello ! </h1>
</div>

谢谢大家。
您可以使用css转换，如

#my_div:hover{
     /*Your styles placed here*/
     -moz-transition:all 1s linear;
     -webkit-transition:all 1s linear;
     -o-transition:all 1s linear;
     transition:all 1s linear;
} 

在我的例子中，
1s
是延迟时间，您可以将其更改为您喜欢的任何值
此CSS代码可以帮助您找到解决方案

.second{ 
   display:inline-block;
   height: 100%;
   width: 100%;
   background-color:red;
   opacity: 0;
   transition: opacity  0.5s ease;    
 }

仅CSS解决方案

我不是从您的示例开始的，因为您在尝试在初始div的基础上创建滑动div时，遗漏了一些重要的概念。让我解释一下：


HTML

<div class="content-container">
    <div class="content-teaser">
        Catchy teaser here
    </div>
    <div class="content-description">
        Description that might be longer than the catchy teaser sentence <button>see more</button>
    </div>
</div>

解释
您将看到3
：

父级，这将帮助我们隐藏实际上已加边框的“隐藏”div，但由于属性
overflow:hidden
默认情况下显示的“摘要”div
“隐藏”div，因为上面的产权而被边缘化和隐藏
所以诀窍是使用这个著名的
溢出：hidden
。首先将所有div、父级和子级设置为相同的宽度和高度。然后，您希望使用一个特殊的position属性将“hidden”div放在“trister”div的顶部，并对每个div使用
position:absolute
。因此，家长自然会有
位置：相对
来告诉您的孩子div相对于这个div的位置，因为默认情况下
处于
位置：相对

然后，您将
overflow:hidden
应用于父级，因此在为将来的“hidden”div设置边框时，您将看不到它

最后，您可以使用一些CSS根据另一个元素的事件使用
+
选择器来更改元素。因此，以下CSS：

.content-teaser:hover + .content-description {
    margin-top : 0px;
}

指：

当类为
.content trister
的div为
时，在类为
.content description
的div上加一个边距：hover
ed.
试试CSS3和.Hi@abhishekkannojia，只有当一个div被“悬停”时，转换似乎才起作用，而不是当您制作：.div:hover.second div{}时我想要第二季的过渡谢谢你@Colns Abt但是你能检查我的问题吗？我刚刚编辑了它。就我而言，我有：#我的_div:hover。第二个{}这真是太棒了，你摇滚！！
.content-container {
    width : 100px;
    height : 140px;
    position : relative;
    overflow : hidden;
}

.content-teaser {
    width : 100px;
    height : 140px;
    background : blue;
    position : absolute;
    color : white;
}

.content-description {
    width : 100px;
    height : 140px;
    background : red;
    position : absolute;
    margin-top : 140px;
    transition : .25s;
}

.content-description:hover {
    margin-top : 0px;
}

.content-teaser:hover + .content-description {
    margin-top : 0px;
}

.content-teaser:hover + .content-description {
    margin-top : 0px;
}