CODEWITHSUNDEEP
csshovertransition
Clueless
Clueless

Reputation: 57

Hover opacity transition on child

I am trying to make the appearance of the child element transition opacity when the parent is hovered. Can someone please explain to me why this doesn't work, I'm sure this is a duplicate question but I can't seem to adapt any similar questions to resolve my issue, please forgive my dumbness.

http://jsfiddle.net/vg0hLstr/1/

<nav>
    <ul>
        <li><a href='#'><img src='#'>hover me</a>
            <ul>
                <li>
                    <h1>Tell me why</h1>
                    <h2>the nested ul opacity doesn't transition</h2>
                </li>
            </ul>
        </li>
    </ul>
</nav>

&

nav ul {
    position:relative;
    width:64px;
    margin:350px 0 0 0; /*for the fiddle*/
    padding:0;
    background:#999;
    list-style:none;
}

nav img {float:left width:64px; height:64px;}
nav a {float:left;}

nav ul li {float:left; background-color:#999;}

nav ul li:hover > ul {display:block; opacity:1;}

nav ul ul {
    display:none;
    position:absolute;
    opacity:0.5;
    width:300px;
    height:200px;
    bottom:100%;
    transition:opacity 1s linear;
}

I have made and used the above menu(without the transition) for just standard pop-out menus but i would like to transition it's opacity, I have seen some sites do it, but I get super confused going through other peoples code. I'm relatively new & self-taught to HTML/CSS so a little walk-through of what i'm doing wrong would be most helpful.

Thanks

Upvotes: 2

Views: 1045

Answers (1)

Kyojimaru
Kyojimaru

Reputation: 2724

perhaps this is what you want: Fiddle

first, your animation didn't work because you use style display: none, which didn't render the element and didn't reserve space for it, so it won't get the animation effect of the opacity, so if you want to use the opacity transation, you need to use visibility: hidden because even though your element is hidden, it's still there. So what you need is just change your CSS to this

nav ul li:hover > ul {visibility:visible; opacity:1;}

nav ul ul {
    visibility:hidden;
    display:block;
    position:absolute;
    opacity:0;
    width:300px;
    height:200px;
    bottom:100%;
    transition:opacity 1s linear, visibility 1s linear;
}

note that you need also need to add transation for the visibility, or else, it will just pop in and out when you hover over it, and also visibility: hidden will work because your element is using position: absolute, if not, it will leave a space between the previous and next element

Upvotes: 2

Related Questions