Css-Übergang auf hover für Kind-element

Im Versuch zum anhalten der Anzeige von einem Kind-element, wenn es ein Elternteil ist mit der Maus auf.

Html:

<span>
    <div>This Is The Child</div>
    Some Text in the span
</span>

Css:

span { 
    position: relative; 
}
span div { 
    display: none;
    width: 0px;
    opacity: 0;

    transition: width 5s;
    -webkit-transition: width 5s;

    transition: opacity 5s;
    -webkit-transition: opacity 5s;
}
span:hover div {
    display: inline-block;
    width: 150px;
    opacity: 1;
}

Als jetzt, wenn die Spanne schwebte, das div hat keine Verzögerung, bevor es gezeigt wird. Wie würde ich mich über es zu beheben, so gibt es eine pause?

Fiddle hier: http://jsfiddle.net/SReject/vmvdK/

Ein paar Hinweise:

Ich ursprünglich versucht, um den übergang des display, aber als Edward wies darauf hin, dass nicht möglich ist, und haben Sinn versucht, die oben, die auch nicht funktioniert

GELÖST

Scheint es, dass jede "anzeigen" - Eigenschaft in der "übergang zu" styling wird stop-übergangs-Animationen zu verhindern. Um dies zu umgehen. Ich habe die Breite des Kindes angezeigt werden 0px und haben es vollständig transparent sein. Dann in die "übergang" - styling, habe ich die richtige Breite, und machen die div solid:

Html:

<span>
    <div>This Is The Child</div>
    Some Text in the span
</span>

Css:

span { 
    position: relative; 
}
span div { 
    position: absolute;

    width: 0px;
    opacity: 0;
    transition: opacity 5s;
    -webkit-transition: opacity 5s;
}
span:hover div {
    width: 150px;
    opacity: 1;
}

Fiddle hier: http://jsfiddle.net/SReject/vmvdK/

warum nicht die andere Weise herum <div><span>This Is The Child</span>Some Text in the DIV</div>? ... es ist mehr semantisch korrekt.
Es ist für ein GM-script, die Spanne ist von der Seite erstellt der GM-Skript ändert. Ich will einen hover-Menü für die angezeigten span

InformationsquelleAutor SReject | 2012-07-14

13

Laut dieser Artikel auf CSS-übergänge, die wird durch den MDN-Seite, die auf CSS-übergänge, die display Eigenschaft ist nicht eine, die umgestellt werden:
Gibt es mehrere Eigenschaften oder Werte, die Sie wollen, um den übergang, aber die sind beide unspecced und nicht unterstützte zu der Zeit des Schreibens:
- background-image, einschließlich Gradienten
- ...
- display zwischen "kein" und alles andere
Also die Anwendung der transition: display 5s; Eigenschaft, um Ihre div hat keine Wirkung.

EDIT:

Basierend auf den aktualisierten code, können Sie erreichen den Effekt, den Sie möchten mit der Deckkraft und Breite als lange, wie Sie nicht angeben, die display Eigenschaft. Entfernen Sie einfach die Zeile
```
display: none;
```
aus der span div Abschnitt, und die pop-up-Menü verwenden Sie die übergänge, die Sie angegeben, wenn Sie den Mauszeiger über Sie.

Seit dem übergang von display:none; zu display:inline-block können nicht animiert werden, diese Eigenschaft ist wahrscheinlich geändert, nur am Ende der übergang - so die Deckkraft animiert, während die div immer noch unsichtbar ist.
- jQuery/JS die einzige Lösung?
- Gut, ich habe aktualisiert die Geige in der Verwendung einer Mischung aus Deckkraft und Breite übergänge, und es immer noch nicht funktioniert
- Möchten Sie vielleicht zu aktualisieren Sie Ihre Frage für fügen Sie den code in Ihre aktualisierte Geige.
- Ich Tat, gut atleast das minimum. Ich sah keinen Grund zu legen, nicht verwandten stylings in der Frage des code-blocks. 🙂
- OK, und ich aktualisierte meine Antwort. (Nicht sicher, ob es warnt Sie, wenn ich änderung vornehmen, da es nicht Zählung als "neue Antwort").
- Ich dachte, es heraus, bevor ich Lesen Sie Ihren Kommentar, aber ich Schätze Ihre Zeit 🙂
- Super!!! Wenn Sie möchten, um Ihre eigene Frage zu beantworten, das richtige format, um es zu tun auf StackOverflow ist die post eine Antwort (klicken Sie auf den button "Antworten" auf Ihre Fragen) und lassen Sie Ihre original-Beitrag als eine Frage. Dann klicken Sie auf "übernehmen" übernehmen Sie Ihre eigene Antwort.
- NUN ya sagen Sie mir...nachdem ich formatiert meine post!!! 😛
- "Rückgängig" können Sie Ihre eigenen änderungen vornehmen, oder Sie können warten, für die edit-ich eingereicht (wiederherstellen der ursprünglichen Frage) genehmigt werden durch die Moderatoren.
- Auch wenn es überarbeitet worden, ich werde die upvote Ihre Antwort, weil es die selben Schluss kam ich
- Sollten Sie nicht wickeln Sie ein block-level-element innerhalb eines inline (span>div). Es ist nicht gültig.
InformationsquelleAutor Edward

-2

Haben Sie versucht, mit -webkit-transition-delay: ;? Wenn nicht, könnte dies etwas sein, was du suchst?

Habe einige änderungen im code:

span div { 
position: absolute;
left: 5px;
top: 5px;
border: 1px solid #000;
background-color: #888;
width: 0px;
opacity: 0;
cursor: pointer;

}

span:hover div {
display: inline-block;
-webkit-transition-delay: 2s;
width: 150px;            
opacity: 1;