在悬停时显示div并保持显示
问题描述:
我有一个div可以显示在另一个div的悬停上,但悬停时它会再次隐藏。我试图不隐藏div的悬停在,在CSS的帮助下,但没有得到办法。在悬停时显示div并保持显示
a:hover b {
opacity : 1
}
a:unhover b {
opacity : 1
}
的div
元素只悬停后显示,但不应该隐藏在悬停了。
答
http://jsfiddle.net/sELKu/152/ 请检查该
#a:hover+ #b{
display:block;
}
更新小提琴 http://jsfiddle.net/sELKu/153/ 请检查该 CSS
#a,
#b {
width: 100px;
height: 50px;
background: black;
}
#b {
margin-top: 50px;
opacity: 0;
transition: 0s 180s;
}
#a:hover+ #b {
opacity: 1;
transition: 0s;
}
#a {
transition: 0s 180s;
}
+0
不,它不会帮助。它通常悬停,即使鼠标离开#a,我也需要保持#b –
答
希望这有助于。
我已经使用关键帧动画,以产生期望的结果:
@keyframes hoverdisplay {
0% {
opacity: 0;
max-height:0;
\t
}
100% {
opacity: 1;
\t
}
}
.hoverForever div {
animation: hoverdisplay 1ms backwards paused;
}
.hoverForever:hover > div {
animation-fill-mode: forwards;
animation-play-state: running;
}
div {
display: block;
background: green;
\t width: 150px;
\t height: 150px;
}
<a href="#" class="hoverForever">
Hover Me to show
\t <div>I will stay forever !</div>
</a>
告诉我们您所取得的成果是什么?你的代码? –
你能提供一个小提琴让它更清晰吗? – OhmnioX