html - 与 :hover? 相反

Question

我在创建网站时遇到了问题。我想要对鼠标悬停和鼠标离开产生不同的效果。默认情况下，该元素是显示:无，并且在元素悬停时它会更改为显示: block 。鼠标离开后，我希望元素保持显示:阻止，直到容器的高度为 0。并且 CSS 转换不支持动画显示。但是，我需要在悬停之前不显示任何内容以隐藏元素。

抱歉，如果我解释得不好，但在访问该页面时它会很有意义。

.overlay {
 position: absolute;
 bottom: 0;
 right: 0;
 background: white;
 width: 100%;
 height: 0%;
 transition: all .5s ease-in-out;
 }

 .overlay h2 {
 font-family: 'Futura';
 color: black;
 font-size: 3.5rem;
 padding: 1.5rem;
 padding-bottom: 1rem;
 display: none;
 transition: all .5s ease-in-out;
}

.item:hover .overlay {
 height: 100%;
 }

.item:hover .overlay h2 {
 display: block;
}

.item:hover .overlay p {
 display: block;
}

.overlay p {
 font-family: 'Open Sans', arial, sans-serif;
 font-size: 1.5rem;
 padding: 1.5rem;
padding-top: .5rem;
padding-bottom: 0;
display: none;
}

如您所见，此代码导致 h2 和 p 标记在鼠标离开后闪烁。什么 CSS 可以让 h2 和 p 标签与 .overlay 元素一起滑开？

Site

Answer 1

从类 .overlay p 和 .overlay h2 中删除 display: none 并且您不需要 display:block 在 .item:hover .overlay h2 和 .item:hover .overlay p 作为显示 block 是这些的默认设置。

与 :hover 状态相反的是默认状态，因此不会悬停 :)