CSS-Übergang beim Hover für untergeordnetes Element

Question

Ich versuche, die Anzeige eines untergeordneten Elements anzuhalten, wenn das übergeordnete Element darüber verschoben ist.

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; 
}​ 

Ab jetzt, wenn die Spanne schwebte ist, die div keine Verzögerung hat, bevor es angezeigt wird. Wie würde ich es beheben, damit es eine Pause gibt?

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

Ein paar Anmerkungen:
Ich habe versucht, ursprünglich um die Anzeige zu übergehen, aber als Edward darauf hingewiesen, dass nicht möglich ist, und haben versucht, Sinn, die über das, auch, isn‘ t Arbeits

GELöST

Es scheint, dass jede Eigenschaft „Anzeige“ in dem „Übergang zur“ Styling keiner Übergangsanimationen nicht passiert zu stoppen. Um dies zu umgehen. Ich setze die Breite des Kindes, das angezeigt werden soll, auf 0 Pixel und es muss vollständig transparent sein. Dann in der "Übergang zu" Styling, stelle ich die richtige Breite und machen den div fest:

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/

Answer 1

Nach this article auf CSS-Übergängen, die durch die MDN page on CSS transitions referenziert wird, ist die display -Eigenschaft keine, die Transit sein kann ioned:

Es gibt mehrere Eigenschaften oder Werte Sie den Übergang wollen, aber die beide unspecced und nicht unterstützte zum Zeitpunkt des Schreibens:

• background-image, einschließlich Steigungen
• ...
• display zwischen keiner und alles andere

Das Anwenden der Eigenschaft transition: display 5s; auf Ihre div hat keine Auswirkungen.

EDIT:

auf Ihrem aktualisierten Code basiert, können Sie den Effekt, den Sie mit einer Undurchsichtigkeit wollen erreichen und so lange Breite wie Sie die display Eigenschaft angeben. Entfernen Sie einfach die Linie

display: none; 

vom span div Abschnitt, und das Popup-Menü werden die Übergänge verwenden, den Sie bei den Mauszeiger über sie.

Da der Übergang display:none;-display:inline-block nicht animiert werden kann, ist diese Eigenschaft wahrscheinlich erst am Ende des Übergangs geändert - so beseelt die Opazität während der div noch nicht sichtbar ist.

Answer 2

Haben Sie versucht, -webkit-transition-delay: ; zu verwenden? Wenn nicht, könnte dies etwas sein, das Sie suchen?

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; 

}

Und hier ist ein demo