A:hover

bonjour,

un petit problème pour faire changer la couleur d'un texte...

1. Dans des colonnes qui flottent à gauche, et qui sont des liens, j'ai du texte de différentes couleurs (noir et gris) :

HTML
<div id="vignettes">
<a href="">
<span class="titre">JE REVE D'UN MONDE / I HAVE A DREAM </span><br />
<span class="soustitre">littérature contestataire américaine et blues</span>
</a>
</div>

* ici, les classes me permettent d'attribuer des couleurs différentes aux textes ("titre"=noir et "sous-titre"=gris)
* le bloc id="vignettes" comprend du texte. Tout le texte est un lien. Chaque bloc de texte est placé l'un à côté de l'autre.

CSS
#vignettes a {
display: block;
float: left;
width: 105px;
}



2. Je veux un fond de couleur noir pour tout le bloc lien, quand la souris passe dessus (a:hover)...

CSS
#vignettes a:hover {
color: #FFF;
background-color: #000;
}

* Jusqu'ici, ça fonctionne : au passage de la souris, tout le fond du bloc devient noir.


3. ... et que le texte devienne blanc quand la souris passe dessus (puisque le fond du bloc est noir, il faut que ça reste lisible) :

CSS
.titre a:hover {
color: #FFF;
}

Evidemment, ça ne marche pas. La couleur ne change pas. Le texte est placé dans une balise <span> qui a déjà une couleur. Je pense que c'est lié à cela, et donc l'attribution "a:hover" ne s'applique pas à la classe "titre" du texte.

Auriez-vous une idée ? Les balises ou CSS sont-elles mal attribuées ?

Merci, merci!

oreli upload/27822-Capturedec.png" alt="upload/27822-Capturedec.pngupload/27822-Capturedec.png" />
Modifié par siu (04 May 2010 - 18:06)

Salut et bienvenue parmi nous,

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle.

Bonne continuation

siu a écrit :

.titre a:hover {
color: #FFF;
}
Evidemment, ça ne marche pas. La couleur ne change pas.

L'interprétation de .titre a:hover est la suivante : colore en blanc tous les liens survolés contenus dans des éléments dont la classe est titre. Ce qui ne correspond pas du tout à ta structure HTML.

La modification de la couleur des liens au survol de leur élément parent (appelé #vignettes) serait la suivante :

#vignettes:hover a{
  color: #FFF;
}

Tu as tout simplement une erreur dans ta sélection :

.titre a:hover {
color: #FFF;

va appeler tout lien survolé contenu dans un élément de classe titre.

Or ton code html est un lien qui contient un élément de classe titre.

Il te faut donc modifier comme ceci :

a:hover .titre {
color: #FFF;

Quelques petits rappels sur les sélecteurs en CSS :
- chez yoyodesign
- chez floatthabox

Je pense que

#vignettes{display: block;
float: left;
width: 105px;}
#vignettes a:hover span {
color: #FFF;
background-color: #000;
}
.titre a:hover span.titre {
color: #FFF;
}

solutionnerait le probleme