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

Posted 2021-04-14

在父元素悬停时，将显示子项，但在不悬停时，子项仍会显示。

这是我的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/

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