我的第一个 div 是一个简单的蓝色方 block ，我的第二个 div 是一个带有 display:none; 的简单红色方 block 。当悬停第一个(蓝色的)时，第二个出现文本和图像等。但我想要的是延迟或滑动的简单效果(如果可能，但如果不是简单的延迟会很酷)我正在工作从 2 小时开始，没有任何成功，请帮忙？
这是我的代码:
<div class="first">
<div class="second">
<h1 class="hover-title">Hello ! </h1>
</div>
CSS:
.first{
transition-delay:2s;
width:100px;
height:100px;
background-color:blue;
}
h1{
color:gold;
}
.second{
display:none;
background-color:red;
}
.first:hover .second{
display:inline-block;
width:100%;
height:100%;
}
谢谢大家
最佳答案
纯 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>
CSS
.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;
}
解释
你看 3 <div></div> :
- 父级，这是一个可以帮助我们隐藏实际上被镶边的“隐藏”div，但由于属性
overflow : hidden而您看不到它的那个 - 默认显示的“teaser”div
- “隐藏的”div，由于上面的属性而被加边并因此隐藏
所以诀窍是使用这个著名的 overflow : hidden .您首先将所有 div、父级和子级设置为相同的宽度和高度。然后，您想使用一个特殊的位置属性，使用 position : absolute 将“隐藏”div 放在“teaser”div 之上。为每一个。所以 parent 自然会有position : relative告诉你的 child div 相对于这个 div 的位置，因为默认情况下 <body>在position : relative .
然后，你申请了overflow : hidden给 parent ，所以当保证 future “隐藏”的div时你不会看到它。
最后，您可以使用一些 CSS 来根据另一个元素使用 + 来改变一个元素。选择器。所以下面的 CSS :
.content-teaser:hover + .content-description {
margin-top : 0px;
}
意思是:
在类为.content-description 的div 上放置边距当 div 类为 .content-teaser是:hover编辑。
关于javascript - 如何在没有显示的 div 上添加 css 悬停延迟？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33911407/