即使没有悬停在父级上,子元素也会出现
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了即使没有悬停在父级上,子元素也会出现相关的知识,希望对你有一定的参考价值。
在父元素悬停时,将显示子项,但在不悬停时,子项仍会显示。
这是我的CSS:
.profile-dropdown{
border: 1px solid #ccc;
border-radius: 3px;
position: relative;
margin-bottom: 15px;
background-color: #fff;
padding: 10px !important;
cursor: pointer;
color: #666;
}
.profile-dropdown > ul{
position: absolute;
top: 42px;
left: 0;
width: 100%;
list-style: none;
z-index: 99999;
border: 1px solid #ccc;
background-color: #fff;
visibility: hidden;
opacity: 0;
transform: translateY(-10px);
transition: all 0.4s ease;
}
.profile-dropdown:hover > ul
visibility: visible;
opacity: 1;
transform: translateY(0px);
}
这是我的html:
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 profile-dropdown">
<p>
<i class="fa fa-user"></i> Some Text <i class="fa fa-angle-down pull-right"></i>
</p>
<ul>
<li><a href="#">Edit</a></li>
<li><a href="#">View</a></li>
</ul>
</div>
正如我所说,我试图在父母悬停上显示子元素(ul)。
在我悬停在父节点之后,子元素消失并且当我尝试转到父元素时,子元素显示自己,即使我没有悬停在父元素上。
有人可以帮忙吗?提前致谢
答案
失踪 {
.profile-dropdown:hover > ul {
visibility: visible;
opacity: 1;
transform: translateY(0px);
}
作为OP的愿望:https://jsfiddle.net/f8g7z2wx/
等待更新问题......
以上是关于即使没有悬停在父级上,子元素也会出现的主要内容,如果未能解决你的问题,请参考以下文章