L'animation d'un élément lorsque vous passez la souris sur les deux autre élément à l'aide de css

je suis en train d'animer une div lorsque vous passez la souris sur un autre div. Ihave code suivant

html

<div>
</div>
<div class="content">
</div>

css

div {
    height: 100px;
    width: 100px;
    background: red; 
        transition: all 0.4s ease-in-out;
}
.content {
    height: 20px;
    width: 20px;
    background: green;
    display: none;

}
div:hover + .content{
    display: block;
    margin-top: -100px;
    margin-left: 50px;
}

Ce que je suis en train de faire, j'ai besoin de pour animer .contenu de margin-top: -100px et margin-left: 50px; à partir de sa position par défaut, lorsque l'utilisateur est passez la souris sur l'un de ces éléments. Mais atm avec ce code, il fonctionne uniquement lorsque l'utilisateur passez la souris sur l' .contenu et animer l'autre sens. (à partir de margin-top: -100px et margin-left: 50px; à la position par défaut). Veuillez excusez mon anglais

jsfiddle-> http://jsfiddle.net/fTAUk/1/

Votre animation ne semble PAS être le goot DIV

OriginalL'auteur Monkey D Luffy | 2013-06-19

  1. 8

    Vous avez besoin d'envelopper le contenu dans la div et l'utilisation d'un sélecteur d'enfant. Note que j'ai donné la plus grande div id. Voici le css:

    JS Fiddle

    #box {
    height: 100px;
    width: 100px;
    background: red;
    position: absolute;
    transition: all 0.4s ease-in-out;
}
#content {
    width: 20px;
    background: green;
    height: 0;
    transition: all 0.4s ease-in-out;
    position: margin-top: -100px;
    margin-left: 50px;
    -webkit-transition: all .8s ease;
    -moz-transition: all .8s ease;
    -ms-transition: all .8s ease;
    -o-transition: all .8s ease;
    transition: all .8s ease;
}
#box:hover > #content {
    height: 20px;
}
    Merci l'homme.. merci beaucoup
    Pas de problème, édité avec le travail des transitions.

    OriginalL'auteur Derek Story