CSS3 Display other element on hover

Question

I'm here trying to display a list item on hovering an anchor tag. How to affect other elements when a div is hovered - tried using this post but I couldn't succeed.

I'm here trying this with only pure CSS.

Here's the FIDDLE.

And below is the code.

HTML :

<div class="container">
    <div class="menu">
        <a class="user" href="#">Brett</a>
        <ul>
            <li>
                <a href="#">Settings</a>
            </li>
            <li>
                <a href="#">Logout</a>
            </li>
        </ul>
    </div>
</div>

CSS :

body {
    font-size: 50px;
}
.container {
    margin-top: 100px;
    margin-left: 200px;
}
a {
    text-decoration: none;
    /*color: #fff;*/
}
.user {
    position: relative;
    z-index: 1000;
    margin-left: -200px;
}
ul {
    list-style: none;
    position: absolute;
    top: 2%;
    left: 11%;
    visibility: hidden;
    opacity: 0;
}
.menu a:hover .menu ul {
    visibility: visible;
    opacity: 1;
    -webkit-transition: visibility 1s, opacity 1s;
    /*color: #000;*/
    /*-webkit-transition: color 1s;*/
}

score 3 · Accepted Answer · answered Nov 21 '13 at 07:29

3

Try using the adjacent siblings selector

.menu a:hover + ul instead of .menu a:hover .menu ul

jsFiddle Demo

answered Nov 21 '13 at 07:29

Itay

16,421
2
48
72

Once the element is visible i can't move my mouse on to it. It's getting disappeared as soon as the mouse get's away from the anchor tag because of the hover effect. How can i make it to place my mouse on to it? – Unknown User Nov 21 '13 at 07:58
Try using `.menu:hover a + ul` – Itay Nov 21 '13 at 07:59
Amazing!! Thank you very much. – Unknown User Nov 21 '13 at 08:02

score 0 · Answer 2 · answered Nov 21 '13 at 07:31

0

You have to use the adjacent siblings selector:

.menu > a:hover + ul

Also, there's something wrong with your property -webkit-transition: visibility 1s, opacity 1s; as it is preventing the menu from appearing.

http://jsfiddle.net/KA5Tg/4/

answered Nov 21 '13 at 07:31

Ming

4,398
1
20
21

Thanks for the reply. `.menu a:hover + ul` this worked for me and even the transition is working smooth. – Unknown User Nov 21 '13 at 07:34

score 0 · Answer 3 · answered Nov 21 '13 at 07:36

Here is update fiddle, Position is not correct for menu but its working on hover.

I have updated css as:

ul {
    list-style: none;
    position: absolute;
    top: 2%;
    left: 11%;  
    display :none;
}
.menu a:hover + ul {
    display :block !important;
    opacity: 1;
    -webkit-transition: visibility 1s, opacity 1s;

}

CSS3 Display other element on hover

3 Answers3

Linked