在父元素悬停时,将显示子项,但在不悬停时,子项仍会显示。
这是我的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/
等待更新问题......