Couleur d'un lien au "hover" avec 2 span
nirmee
Messages postés
1
Date d'inscription
Statut
Membre
Dernière intervention
-
RAD ZONE Messages postés 5230 Date d'inscription Statut Contributeur Dernière intervention -
RAD ZONE Messages postés 5230 Date d'inscription Statut Contributeur Dernière intervention -
Bonjour,
J'ai mis en place des boutons avec textes sur 2 lignes. J'ai encadré chaque ligne d'un <span> afin de pouvoir leur appliquer 2 styles (1 style pour la ligne "Lorem", et 1 style pour la ligne "Ipsum"). Je souhaiterais maintenant que la typo des 2 lignes passe au blanc lors du survol, quelque soit la zone du bloc <a> survolé. Je n'ai pas réussi à mettre cela en place.
Mon HTML :
Mon CSS :
Ma déclaration "color" de mon selecteur "nav a:hover" n'est pas prise en compte...
Quelqu'un aurait-t-il une piste ?
Merci d'avance pour votre aide.
J'ai mis en place des boutons avec textes sur 2 lignes. J'ai encadré chaque ligne d'un <span> afin de pouvoir leur appliquer 2 styles (1 style pour la ligne "Lorem", et 1 style pour la ligne "Ipsum"). Je souhaiterais maintenant que la typo des 2 lignes passe au blanc lors du survol, quelque soit la zone du bloc <a> survolé. Je n'ai pas réussi à mettre cela en place.
Mon HTML :
<nav>
<h2>Sommaire</h2>
<ul>
<li><a href="#"><span>Lorem</span><span>Ipsum</span></a></li>
<li><a href="#"><span>Lorem</span><span>Ipsum</span></a></li>
<li><a href="#"><span>Lorem</span><span>Ipsum</span></a></li>
</ul>
</nav>
Mon CSS :
nav {
width: 260px;
}
nav a {
display: block;
padding: 13px 15px;
}
nav span {
display: block
}
nav span:first-child {
color: #333333;
}
nav span+span {
font: 0.875em 'open_sansitalic', arial, sans-serif;
color: #666666;
}
nav a:hover {
color: #ffffff;
background-color: #c0392b;
}
Ma déclaration "color" de mon selecteur "nav a:hover" n'est pas prise en compte...
Quelqu'un aurait-t-il une piste ?
Merci d'avance pour votre aide.
A voir également:
- Couleur d'un lien au "hover" avec 2 span
- Partager des photos avec un lien - Guide
- Lien url - Guide
- Supercopier 2 - Télécharger - Gestion de fichiers
- Verificateur de lien - Guide
- Excel cellule couleur si condition texte - Guide
1 réponse
Salut
c est les valeurs donnees au span qui prennent la main !!
met ca
ps: le premier nav a;hover est pour que le soulignage des liens passe aussi en blanc
de meme si tu voulais donner une couleur hover au second span seulement tu ajouterais ca
a+
♣ La plus grande erreur que puisse faire un homme est d'avoir peur d'en faire une. ♣
c est les valeurs donnees au span qui prennent la main !!
met ca
nav a:hover ,nav a:hover span {
color: #ffffff;
background-color: #c0392b;
}
ps: le premier nav a;hover est pour que le soulignage des liens passe aussi en blanc
de meme si tu voulais donner une couleur hover au second span seulement tu ajouterais ca
nav a:hover span+span {
color: #50CC0C;
}
a+
♣ La plus grande erreur que puisse faire un homme est d'avoir peur d'en faire une. ♣
