CSS悬停/鼠标移出过渡？

Question

I am having a problem with mouse out transition I have used a few examples from similar questions but had no luck as it is a slightly different case:

When the page loads I have a menu bar with one of the options triggering a hidden div:

.top-links div.musictest {
    display: none;
    position:absolute;
    float:left;
    }

The particular option when hovered triggers div.musictest to display as a block.

.top-links li.music:hover + div.musictest {
        display:block;
    }

So when this drop down div.musictest is displaying as a block to maintain it showing as it includes options itself to be clicked I have CSS to say:

.top-links div.musictest:hover {
     display:block;
    }

So here is my problem, from everywhere I have read if I want .top-links div.musictest to fade out when I stop hovering it needs a transition delay however when I put one in nothing happens as I believe display:none is stopping it from fading out. But without the display:none it shows the hidden div.musictest always.

At the moment the code above works fine if I want the hidden div to disappear immediately, but I am wanting it to have a transition time before disappearing.

Any ways around this or am I putting it in the wrong place completely?

Thanks!

Answer 1

You can set opacity: 0 instead of display: none

(Edit: I just read your title again, you can check this link for only fade out)

So here is an example with both:

 .top-links li.music:hover { background-color: #EEE; } .top-links li.music:hover + div.musictest { display: block; opacity: 1; } .top-links div.musictest { opacity: 0; transition: 1s; -moz-transition: 1s; -webkit-transition: 1s; -o-transition: 1s; position: absolute; float: left; top: 44px; width: 800px; left: 22px; } .top-links div.musictest:hover { display: block; } 

 <div class="top-links"> <toplinks> <ul id="menu"> <li>Home</li> <li class="music">Music</li> <div class="musictest"> Show when hover li class="music" </div> </ul> </toplinks> </div> 

Answer 2

I set the opacity of the div to zero so it won't be visible but it's still a in display mode block and when your mouse is out of the element it's start to fade out as you wanted.

Add this to your css:

.top-links li.music:hover + div.musictest {

       opacity:1;
       transition: opacity 0.1s;
       -moz-transition: opacity 0.1s;
       -webkit-transition: opacity 0.1s;
       -o-transition: opacity 0.1s;
    }

  .top-links li.music + div.musictest {
       opacity:0;
       display:block;
       transition: opacity 2s;
       -moz-transition: opacity 2s;
       -webkit-transition: opacity 2s;
       -o-transition: opacity 2s;
    }

And here is a working example