在悬停时显示div并保持显示

我有一个div可以显示在另一个div的悬停上，但悬停时它会再次隐藏。我试图不隐藏div的悬停在，在CSS的帮助下，但没有得到办法。在悬停时显示div并保持显示

a:hover b { 
    opacity : 1 
} 

a:unhover b { 
    opacity : 1 
}

的div元素只悬停后显示，但不应该隐藏在悬停了。

来源

2017-05-03 Aman Agarwal

告诉我们您所取得的成果是什么？你的代码？ –

你能提供一个小提琴让它更清晰吗？ – OhmnioX

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; 
}

来源

2017-05-03 12:00:35

不，它不会帮助。它通常悬停，即使鼠标离开#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>

来源

2017-05-03 12:38:04

在悬停时显示div并保持显示

回答

相关问题