web-dev-qa-db-fra.com

CSS :: enfant défini pour changer la couleur au survol du parent, mais change également lorsqu'il survole

J'ai un <a> avec un <span> enfants. J'ai écrit du CSS qui modifie la couleur de la bordure des enfants lorsque le parent est survolé, mais il change également la couleur de la bordure lorsque je survole les enfants, ce qu'il ne devrait pas.

a {
    padding: 50px;
    border: 1px solid black;
}

a span {
    position: absolute;
    top: 200px;
    padding: 30px;
    border: 10px solid green;
}

a:hover span {
    border: 10px solid red;
}   
<a>
    Parent text
    <span>Child text</span>    
</a>
htmlcsshoverparent-child
38
HoGo

Mise à jour

Ce qui suit avait du sens pour 2013. Cependant, maintenant, j'utiliserais le sélecteur :not() comme décrit ci-dessous .

CSS peut être écrasé.

DÉMO: http://jsfiddle.net/persianturtle/J4SUb/

Utilisez ceci:

.parent {
  padding: 50px;
  border: 1px solid black;
}

.parent span {
  position: absolute;
  top: 200px;
  padding: 30px;
  border: 10px solid green;
}

.parent:hover span {
  border: 10px solid red;
}

.parent span:hover {
  border: 10px solid green;
}
<a class="parent">
    Parent text
    <span>Child text</span>    
</a>
61
Raphael Rafatpanah

Si vous ne vous souciez pas de la prise en charge des anciens navigateurs, vous pouvez utiliser :not() pour exclure cet élément:

.parent:hover span:not(:hover) {
    border: 10px solid red;
}

Démo: http://jsfiddle.net/vz9A9/1/

Si vous faites voulez les prendre en charge, je suppose que vous devrez soit utiliser JavaScript, soit remplacer les propriétés CSS à nouveau:

.parent span:hover {
    border: 10px solid green;
}
4
Blender