How do i achieve CSS Hover here?

Question

I need to show a divon hover of a tag. This is my code.

<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>

I already tried answer on Hide element on hover of another element

My css which is not working

.user-details {
    visibility: hidden;
}

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

If hover on user-a link, user-details should be visible!

How do i achieve this?

Does this answer your question? [Hide element on hover of another element](https://stackoverflow.com/questions/41803496/hide-element-on-hover-of-another-element) — Simone Rossaini, Apr 12 '21 at 11:12

score 0 · Accepted Answer · answered Apr 12 '21 at 11:35

Your code don't work because you try to use + that selector is for next sib.
To do what you want you have to insert the second element in the same div and use ~ selector example:

.user-details {
    visibility: hidden;
}

.user-a:hover ~ .user-details{
    visibility: visible;
}

<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 class="user-details d-inline-block pull-right text-center mr-2">hello</div>
        </div>        
    </div>

Alternatively you could use javascript

How do i achieve CSS Hover here?

1 Answers1