[Résolu] Hover div comportement différent pour les enfants

Bonjour,
J'essaie de faire un hoover( encadré) sur une div. Mais tous les éléments dans cette div sont encadrés aussi.
Comment éviter que tous les éléments image et <p> soient encadrés

Merci



Html

<div class="ribbon">
  <div class="ribbon_categorie">
    <div class="test">
       <div class="ribbon_categorie_item"><img src="Capture.jpg"><p>BlaBla</p></div>
    </div>    
     <div class="ribbon_categorie_item">BlaBla</div>
     <div class="ribbon_categorie_item">BlaBla</div>
     <div class="ribbon_categorie_item">BlaBla</div>
     <div class="ribbon_categorie_item">BlaBla</div>
      <hr>
      <p>TRAVAIL</p>
    </div>

Css

.test p :hover{
    border: none;
}
.test img :hover{
    border: none;
}
.test :hover{
    border: solid 1px blue;
}

Modifié par neka11 (17 Jul 2014 - 13:58)

Il n'y a pas d'espace entre l'élément à pointer et :hover. Donc :

.test:hover { border: solid 1px blue;}

Bonjour,

Il suffit de faire

.test:hover{
    border: solid 1px blue;
}

C'est l'espace entre .test et :hover qui a donné l'effet de survol a tout les fils.
Comportement intéressant au passage !

EDIT : Grillé au poteau ! +1 pour Jojaba
Modifié par _laurent (17 Jul 2014 - 12:23)

Super merci !