如何在使用css悬停在另一个div标签上时显示隐藏的div标签
如何在使用css悬停在另一个div标签上时显示隐藏的div标签
提问于 2018-09-19 00:32:38
我有一个问题，我知道它很小，但出于我的需要，我怀疑当我悬停在一个div上时，我希望第二个div应该再次显示并移除光标，它应该隐藏如何使用css来做这件事
div 2，它将被隐藏，所以当悬停在div上时，它应该显示这个div标签，并再次悬停移除它，它应该被隐藏使用css
<div>
<a href="javascript:void(0)">
<div class="show-all-hover-zone" style="height: 212px;">
<i class="fa fa-chevron-left" style="font-size:25px;color:darkslategrey;position:relative;top:97px;"></i>
</div>
</a>
<div style="background-color:whitesmoke;padding: 3px;height:210px;width:0px;position:absolute;top:164px;display:none;" class="expand-menu1">
</div>
回答 1
Stack Overflow用户
发布于 2018-09-19 06:23:42
在你的情况下
a:hover ~.expand-menu1{ display: block !important; }
但请不要使用内联。它可以更优雅。例如：
HTML
<a class="hoverOnShow" href="javascript:void(0)">
<div class="show-all-hover-zone">
<i class="fa fa-chevron-left" ></i>
</div>
</a>
<div class="expand-menu1">
</div>CSS
.show-all-hover-zone{
height: 212px;
}
.fa-chevron-left{
font-size: 25px;
color:darkslategrey;
position:relative;
top: 97px;
}
.expand-menu1{
background-color:whitesmoke;
padding: 3px;
height: 210px;
width: 0px;
position:absolute;
top: 164px;
display:none;
}
.hoverOnShow:hover ~.expand-menu1{
display: block;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52391037
复制相关文章
相似问题