Question

创建网站时遇到了问题。我想要对鼠标悬停和鼠标离开有不同的影响。默认情况下，该元素为display：none，并且在该元素悬停时将其更改为display：block。鼠标离开后，我希望元素保持display：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

从班级display: none和.overlay p中删除.overlay h2，并且由于显示块的存在，您不需要display:block和.item:hover .overlay h2上的.item:hover .overlay p这些的默认设置。

：hover状态的相反是默认状态，所以不要悬停：）

Answer 2

将pointer-events: none;添加到.overlay
从display: none;和.overlay h2中删除.overlay p

：hover的对面？

2 个答案: