marshmallow marshmallow - 1 year ago 78
HTML Question

CSS Hover Out / Mouse Out Transition?

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;

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

.top-links + div.musictest {

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 {

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?


Answer Source

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 + div.musictest {

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

  .top-links + div.musictest {
       transition: opacity 2s;
       -moz-transition: opacity 2s;
       -webkit-transition: opacity 2s;
       -o-transition: opacity 2s;

And here is a working example