Comment puis-je utiliser :hover avec plusieurs classes
J'ai un css des boutons de style et de quelques modes de couleurs styles. J'utilise la couleur des classes de couleur les choses de la même couleur et d'un style de bouton pour activer les boutons ronds.
Comment puis-je ajouter un hover style pour mes boutons pour changer la couleur, une teinte plus claire? Je pensais que ça allait être aussi simple que .classe classe2:hover {etc} mais ça ne fonctionne pas pour une raison quelconque.
Ici un violon que j'ai préparé pour le démontrer:
http://jsfiddle.net/7n4Wy/
HTML
<p class="red button">Test</p>
<p class="blue button">Test</p>
<p class="red"> Not a button </p>
CSS
.red {
background: red;
}
.blue {
background: blue;
}
.button {
border-radius: 6px;
}
.button:hover .red:hover {
background: pink;
}
Vous devez vous connecter pour publier un commentaire.
Ce que vous avez à faire est d'essayer de faire correspondre
.red:hover
qui est à l'intérieur de.button:hover
, ce qui implique un élément imbriqué dans votre balisage.Puisque vous êtes en sélectionnant le même élément, vous devez combiner les deux classes avec un seul
:hover
:Mis à jour le violon
.button:hover.red:hover
, qui fonctionne, mais est source de confusion en raison de la double:hover
.Utilisez le code suivant JSFIDDLE
Vous pouvez appliquer un CSS-règle à plusieurs sélecteurs (classes comme «.bouton», ou des états comme «:hover») en les séparant par une virgule.
donc il suffit d'ajouter une virgule:
Appliquer plusieurs classes, ne pas ajouter de l'espace (il suffit d'utiliser une autre période):
CSS
HTML
L'espace est utilisé pour désigner un élément enfant. c'est à dire p.bouton rouge:hover aurait une incidence sur tous les éléments avec la classe rouge sur le vol stationnaire qui sont entièrement contenues dans le parent paragraphes avec bouton classe.