Diese Frage hat hier bereits eine Antwort:

Ich habe versucht, CSS zu verwenden, um ein ausgeblendetes Div einzublenden, wenn ich den Mauszeiger über das übergeordnete Element bewege.

Bisher habe ich es nur geschafft, die versteckte Div zu zeigen, aber es gibt keine Lockerungsübergänge.

Hier ist mein Code für JSfiddlehttp://jsfiddle.net/9dsGP/

Hier ist mein Code:

HTML:

<div id="header">
<div id="button">This is a Button
    <div class="content">
    This is the Hidden Div
    </div>
</div>
</div>

CSS:

#header #button {width:200px; background:#eee}

#header #button:hover > .content {display:block; opacity:1;}

#header #button .content:hover { display:block;}

#header #button .content {

-webkit-transition: all .3s ease .15s;
-moz-transition: all .3s ease .15s;
-o-transition: all .3s ease .15s;
-ms-transition: all .3s ease .15s;
transition: all .3s ease .15s;

    opacity:0;
    clear: both;
    display: none;

    top: -1px;
    left:-160px;
    padding: 8px;
    min-height: 150px;
    border-top: 1px solid #EEEEEE;
    border-left: 1px solid #EEEEEE;
    border-right: 1px solid #EEEEEE;
    border-bottom: 1px solid #EEEEEE;
    -webkit-border-radius: 0px 7px 7px 7px;
    -moz-border-radius: 0px 7px 7px 7px;
    -khtml-border-radius: 0px 7px 7px 7px;
    border-radius: 0px 7px 7px 7px;
    -webkit-box-shadow: 0px 2px 2px #DDDDDD;
    -moz-box-shadow: 0px 2px 2px #DDDDDD;
    box-shadow: 0px 2px 2px #DDDDDD;
    background: #FFF;
}

Irgendeine Ahnung, was ich falsch mache? Ich versuche nur, einen reibungslosen Effekt für den ausgeblendeten Inhalt zu erzielen, wenn ich mit der Maus über die Schaltfläche fahre. Danke im Voraus!