CSS Hover Out / Mouse Out Transition?

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