Alors bonjour, je vous explique mon problème.

Je voudrais pouvoir activer l'animation d'un <div id="menu">...</id> via un autre <div id="bouton">...</id>. Ces deux <div> ont une transition quand on les survols : le menu apparaît à l'écran par la gauche en glissant, le bouton change d'apparence. Quand je survol le bouton le menu apparaît, et le bouton change bien d'apparence, et tant que je continue de survoler le menu (pas le bouton), ce dernier ne se cache pas (ça c'est fait). Ce que je n'arrive pas à faire, c'est que, tant que survol le menu, le bouton ne revient pas à son apparence d'origine.

Je vous illustre ce que je veux faire avec un petit bout de code :

HTML

<div>
  <div id="bouton">
    <div id="boutonTransition">
    </div>
  </div>
  <div id="menu">
    <ul>
      <li>LOREM IPSUM</li>
      <li>DOLOR SIT AMET</li>
      <li>CONSECTETUR</li>
    </ul>
  </div>
</div>

CSS

#bouton:hover #boutonTransition {
/* La transition */
}
#bouton:hover ~ #menu {
/* La transition */
}

Le bouton étant en haut dans la cascade, il peut affecter le menu via le sélecteur ~, mais pas l'inverse.

Je voudrais pourvoir un truc du genre :

#bouton:hover #boutonTransition,
#menu:hover ~ #bouton #boutonTransition {
/* La transition */
}
#bouton:hover ~ #menu {
/* La transition */
}

Alors est-il possible de faire un truc du genre avec du JavaScript par exemple ? ou faire ce que je veux faire d'une autre façon ?

Merci pour vos réponses avisées !

Bonjour,

Il me semble que ce que tu veux faire en css n'est possible qu'avec une div enfant. dans le sens où ton bouton peut modifier bouton-transition mais pas menu.

En js c'est faisable de plusieurs façon si tu trouves pas je peux te donner un coup de main

+

Salut,

et en faisant le :hover sur la div parent du bouton et du menu ?

ThibaudRussel, j'ai trouver une alternative où j'ai dû refaire tout mon CSS, mais si tu pouvais quand même me passer ton coup de main, car j'ai chercher dans moult forums, blogs... Rien ! Donc ton coup de main est la bienvenue ! 

Et Frogweb, justement le parent doit rester neutre.

Avec mon idée le parent reste neutre.

<div class="effet-hover">
    <button>Ouvrir le menu</button>
    <ul class="menu">
        <li>LOREM IPSUM</li>
        <li>DOLOR SIT AMET</li>
        <li>CONSECTETUR</li>
    </ul>
</div>

.effet-hover {
    position:relative;
}
button {
    cursor:pointer;
    background:brown;
    color:#fff;
    padding:8px;
    transition:background 0.5s
}
.menu {
    padding:0;
    margin:0;
    list-style: none;
    position:absolute;
    left:-150%;
    transition:all 0.5s;
}
.effet-hover:hover button {
    background:burlywood
}
.effet-hover:hover .menu {
    left:0;
    right:0
}

 Sinon effectivement en js c'est plus simple.

ThibaudRoussel, enfaîte je voudrais appliquer ce "principe" sur d'autres éléments finalement, étant donné que le problème de mon menu est résolu (je clique sur l'icone hamburger, le menu s'affiche et vice-versa). 

Voilà un exemple du code HTML sur lequel je veux appliquer le JavaScript :

<article>
  <div class="button" id="buttonOne"> <!-- L'un des div:hover... --> 
    <h6>LOREM IPSUM</h6>
    <div class="explanation"> <!-- ...qui au passage de la souris, affiche la classe .explanation lui correspondant. -->
      Lorem ipsum dolor sit amet, consectetur 
      adipisicing elit, sed do eiusmod tempor incididunt 
      ut labore et dolore magna aliqua. Ut enim ad minim 
      veniam, quis nostrud exercitation ullamco laboris 
      nisi ut aliquip ex ea commodo consequat.
    </div>
  </div>
  <div class="button" id="buttonTwo"> <!-- Et ce à chaques boutons de l'article. -->
    <h6>DOLOR SIT AMET</h6>
    <div class="explanation">
      Lorem ipsum dolor sit amet, consectetur 
      adipisicing elit, sed do eiusmod tempor incididunt 
      ut labore et dolore magna aliqua. Ut enim ad minim 
      veniam, quis nostrud exercitation ullamco laboris 
      nisi ut aliquip ex ea commodo consequat.
    </div>
  </div>
  <div class="button" id="buttonThree">
    <h6>CONSECTETUR</h6>
    <div class="explanation">
      Lorem ipsum dolor sit amet, consectetur 
      adipisicing elit, sed do eiusmod tempor incididunt 
      ut labore et dolore magna aliqua. Ut enim ad minim 
      veniam, quis nostrud exercitation ullamco laboris 
      nisi ut aliquip ex ea commodo consequat.
    </div>
  </div>
</article>

Et voici un exemple du code CSS : 

.button {
	/* Mise en forme de mes boutons. */
	...
	box-shadow: 5px 5px 5px #00000055; /* Les codes couleur avec transparence ne fonctionnent pas sur IE */
	...
	cursor: pointer;
	transition: all .15s ease-in-out;
}
.button:hover, /* Fonctionne */
.explanation:hover .button { /* Ne fonctionne pas, car on ne pas - encore - selectionner le parent. */
	/* Animation au :hover */;
	transform: translateY(5px) translateX(5px);
	...
	box-shadow: 0 -5px 0 #00000055;
}

.explanation {
	/* Mise en forme de mes div */
	...
	transform: translateX(200%);
	...
	transition: all .15s ease-in-out;
}
.explanation:hover,
.button:hover .explanation {
	transform: translateX(0px);
}

Le problème ici est différent, il ne faut plus sélectionner le frère précédent mais le parent. En CSS3 on ne peut pas mais il me semble (si je ne dis pas de counneries) qu'au CSS4 il y aura un sélecteur pour sélectionner le parent. 

PS : Si tu pouvais quand même donner la soluce pour le faire avec le frère précédent.

Et Frogweb, ta solutions n'est malheureusement pas compatible avec la mienne : mon bouton est constitué d'une box pour le centrer, et dans cette box, il y a le bouton ! C'est au survol du bouton - et non de la box - que mon menu doit apparaître. Ça m'aurais arranger qu'il n'y ai pas de JavaScript (n'étant pas encore un expert sur le sujet), mais je suis preneur de la moindre solutions !  

Et merci encore pour vos réponses avisées !

Avec jquery ça se fait en une ligne , c'est l'un des nombreuse possibilité :). Je la trouve assez simple après tu dois faire appel jquery mais c'est vraiment pas long

//Sélectionne les <li> qui ont pour enfant un élément ayant la classe maClasse
$(.maClasse).parents('li').css(propriété, valeur);

#pas mon code 

Si tu as cette CSS telle quelle il faut enlever les ...

Mais surtout le ; à la fin de la ligne /* animation au hover */

ça devrait aller mieux ensuite.

Parce que en fait tu te complique la vie, tu n'as pas besoin de cibler bouton quand tu survol explanation puisque tu déclare la même chose avec button:hover. C'est la même animation.

A moins que je n'ai pas compris le résultat que tu veux obtenir...

Sinon, si tu veux faire deux effets différents sur button, un quand on le survole et un autre quand on survole explantion, tu pourrais faire quelque chose comme ça avec JQuery (je ne suis pas un expert...) :

<script type="text/javascript">
$('.explanation').each(function(){
    $('.explanation').mouseover(function(){
        $(this).parents('.button').addClass('hover').siblings().removeClass('hover')
    });
    $('.explanation').mouseleave(function(){
        $(this).parents('.button').removeClass('hover')
    });
});
</script>

On peut sûrement faire plus simple ou d'une autre façon (if/else ?) mais comme je le disais je ne suis pas un expert dans ce domaine.
En tout cas ça fonctionne