即使没有悬停在父级上,子元素也会出现

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/

等待更新问题......

以上是关于即使没有悬停在父级上,子元素也会出现的主要内容,如果未能解决你的问题,请参考以下文章

如果在子级上验证失败,则不会在父级上调用IValidatableObject.Validate

悬停在子级上而对父级没有悬停效果[重复]

可折叠菜单改变元素的位置

nHibernate 保存一对多

父级上的jQuery单击事件,但找到子(单击)元素

IE9 和 Z-index:元素在悬停时消失在父级后面