[Résolu] Changer la taille d'une div au survol d'une autre

Bonjour à tous
Comme dit dans le titre, j'aimerais pouvoir changer la taille d'une div1 au survol d'une div2, sachant que la première est parente de l'autre.
Voici mes codes :

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

.content {
    position :relative;
    z-index: 1;
    border: 2px solid white;
    background-color: blue;
    width: 960px;
    height: 300px;
    margin: auto;
}

.carte {
    position :relative;
    z-index: 2;
    border: 2px solid white;
    background-color: green;
    width: 100%;
    height: 50%;
    margin: auto;
}

.carte_button {
    position :relative;
    z-index: 2;
    border: 2px solid white;
    background-color: yellow;
    width: 100px;
    height: 50px;
}

J'ai volontairement omis la suite avec les :hover que j'ai manipulé dans tout les sens sans arriver à rien.
J'ai bien-sur cherché sur ce forum (et d'autres), et trouvé des codes qui s'en rapprochait mais sans arriver à l'appliquer aux miens.

J'ai fais mes tests sur ce codepen, que j'ai laissé en l'état : codepen.
Concretement, il faudrait qu'au survol du bloc jaune, le bloc vert s'étire pour occuper tout le bloc bleu. ..Si c'est possible...
Précision : j'aimerais une solution CSS pure (sans javascript), la raison est que je suis encore débutant en CSS, et que je ne me suis pas encore penché sur le js.
Le but étant ici de comprendre ce que je fais avec mon CSS, et d'en saisir les limites

Par avance merci

Bonjour.

Désolé de te décevoir, mais tu ne vas pas pouvoir faire ce que tu souhaite en CSS. Le CSS est incapable de remonter à un élément parent comme cela.

En conclusion, tu devras obligatoirement passer par du JS. Si tu n'es pas à l'aise avec le javascript, je te conseille malgré tout de te pencher un coup vers jQuery.

Avec par exemple ce court bout de code, tu pourras normalement faire ce que tu veux :

$('.carte_button').hover(
    function() {
        $('.carte').css({'height':'100%'})
        // ou $(this).parent().css({'height':'100%'})
    }, function() {
        $('.carte').css({'height':'50%'})
    }
 )

EDIT : Tu remarqueras que la bordure de ta div carte "sort de son parent", aussi je te conseille la lecture de cet article de Raphaël Goetter sur le width:100%

EDIT2 : Je tiens quand même à préciser que c'est avec ton architecture que tu ne peux pas faire ce que tu souhaites.
Mais si tu décales ton élément "bouton" au dessus de la div que tu souhaites modifier, là ton problème est résoluble (wouah ça c'est du mot qui déchire)
Voilà mon fork
Modifié par SolidSnake (08 Aug 2014 - 09:08)

Merci SolidSnake

Je vais m'inspirer de ta 2eme solution, sans javascript.
Je m'y intéresserai un jour a js, quand j'aurais fini d'explorer les possibilités de CSS3
D'autant que j'ai encore appris un trick ce matin, en l’occurrence :

.carte_button:hover + .carte {
    height: 100%;
}

Ca je ne connaissais pas. Si je comprends bien, c'est une syntaxe qui ne marche pas si les div sont parentes ?

Encore merci et à bientôt pour une autre question de noob
Modifié par bboygaz (08 Aug 2014 - 11:28)

Non, ça ne fonctionne pas si tu veux cibler un élément parent, on appelle ça un sélecteur d'adjacence.

Par contre comme tu dois le savoir tu peux cibler un enfant, donc une autre solution que je trouvais beaucoup moins classe aurait été de mettre ta div carte dans ta div button, puis en retouchant le CSS que ta div parente "passe devant ta div enfant".

Pour découvrir d'autres sélecteurs bien utiles, je te conseille ce petit lien
Modifié par SolidSnake (08 Aug 2014 - 11:49)

Merci encore, très intéressant le petit lien