Transition Css sur le vol stationnaire pour enfant de l'élément

Im essayant de mettre en pause l'affichage d'un élément enfant lorsqu'il est parent est survolé.

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

De plein droit maintenant, quand la portée est planait, la div a pas de délai avant qu'il est indiqué. Comment pourrais-je aller sur la fixation-il si il y a une pause?

Violon ici: http://jsfiddle.net/SReject/vmvdK/

Quelques remarques:
J'ai d'abord essayé à la transition de l'écran, mais comme Edward l'a souligné, ce n'est pas possible, et ai le sens essayé ci-dessus qui, aussi, n'est-ce pas de travail

RÉSOLU

Il semblerait qu'un "écran" de la propriété dans la "transition" style va arrêter toutes les animations de transition de passe. Pour contourner ce problème. J'ai défini la largeur de l'enfant d'affiche pour 0px et à ce qu'il soit complètement transparent. Puis, dans la "transition" de style, j'ai mis la bonne largeur, et de faire de la div solide:

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

Violon ici: http://jsfiddle.net/SReject/vmvdK/

pourquoi ne pas l'inverse <div><span>This Is The Child</span>Some Text in the DIV</div>? ... il est plus sémantiquement correct.
C'est pour un script GM, la travée est créé par le site de l'GM script modifie. Je veux créer un hover du menu pour l'affichage de la durée de

OriginalL'auteur SReject | 2012-07-14

  1. 12

    Selon cet article sur les transitions CSS, qui est référencé par le MDN page sur les transitions CSS, le display propriété n'est pas celui qui peut être transféré:

    Il y a plusieurs propriétés ou valeurs que vous aurez envie de transition, mais qui sont à la fois unspecced et non pris en charge au moment de l'écriture:

    • background-image, y compris les gradients
    • ...
    • display entre aucun et rien d'autre

    Donc l'application de la transition: display 5s; propriété à votre div n'a aucun effet.

    EDIT:

    Basée sur la mise à jour de votre code, vous pouvez obtenir l'effet que vous voulez avec l'opacité et la largeur tant que vous ne spécifiez pas le display de la propriété. Tout simplement supprimer la ligne

    display: none;

    de la span div section, et le pop-up menu utiliser les transitions que vous avez spécifié lorsque vous placez le pointeur dessus.

    Depuis la transition de display:none; à display:inline-block ne peut pas être animé, cette propriété est probablement modifié qu'à la fin de la transition - de sorte que l'opacité de l'anime, alors que le div est toujours invisible.

    jQuery/JS est la seule solution?
    Eh bien, j'ai mis à jour le violon à utiliser un mélange d'opacité et de la largeur des transitions et il ne fonctionne toujours pas
    Vous pourriez vouloir mettre à jour votre question d'inclure le code dans la mise à jour de votre violon.
    Je l'ai fait; bien au moins le minimum. Je ne voyais aucune raison de mettre sans rapport avec stylings de la question de blocs de code. 🙂
    OK, et j'ai mis à jour ma réponse. (Pas sûr que si il vous avertit lorsque je fais une modification, car il ne compte pas comme une "nouvelle réponse").

    OriginalL'auteur Edward

  2. -2

    Avez-vous essayé d'utiliser -webkit-transition-delay: ;? Si non, cela peut être quelque chose que vous recherchez?

    Fait quelques modifications dans le 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;

    }

    Et voici un démo

    OriginalL'auteur Christofer Vilander