如何在这里实现CSS悬停？

我需要显示一个标签的divon悬停。 这是我的密码

<div class="p-0 d-inline-block main-div" 
        [ngClass]="{
            'col-md-10': showSideBar,
            'col-md-12': !showSideBar
        }">
        <div class="nav-div d-flex justify-content-start navbar-fixed-top">
            <a style="cursor: pointer;" 
                class="user-a my-auto">
                <img class="fa-user" src="/assets/images/user.svg" width="30" alt="user">
            </a>
            <a style="cursor: pointer;" class="logout-a my-auto" (click)="logout()">
                <img src="/assets/images/logout.svg" width="30" alt="logout">
            </a>
        </div>
        <div class="user-details d-inline-block pull-right text-center mr-2">hello</div>
    </div>

如果将鼠标悬停在user-a链接上，则用户详细信息应可见

---

如何实现这一点？

您的代码无法工作，因为您试图使用

+

该选择器用于下一个sib。
要执行所需操作，必须在同一div中插入第二个元素，并使用

~

选择器示例：

。用户详细信息{
可见性：隐藏；
}
.user-a:hover~。用户详细信息{
能见度：可见；
}

你好

这是否回答了您的问题？先生，我已经在我的css中尝试过了，它不起作用

.user-details {
    visibility: hidden;
}

.main-div .nav-div .user-a:hover + .main-div .user-details{
    visibility: visible;
}