[Résolu] Problème changement de couleur d'un texte dans un hover

Question

gkgsl

16 Oct 2012 à 01:57

Bonjour,

Je débute dans la programmation et j'ai un petit problème. Je remercie d'avance tout ceux qui me liront et peut-être pourront m'aider...

Pour vous décrire mon problème, je crée sur une page un menu :

upload/46584-menu1.png

Vous pouvez remarquer que vu que l'on est sur la page index soit la page "Accueil" qui est donc entouré de orange avec un texte bleu contrairement aux autres liens du menus (texte orange sur fond bleu).
Je souhaite que quand la souris passe sur un des éléments du menu (autre que "Accueil" qui ne change jamais sur cette page), le texte et le fond concerné changent de couleurs (le texte devenant alors bleu et le fond orange), or le fond change en partie de couleur mais pas le texte :

upload/46584-menu2.png

J'ai beau chercher encore et encore mais je ne trouve pas le hic :S
Si quelqu'un veut bien me donner un petit coup de main, je le remercierais infiniment !

Je vous joins le code html concerné :

	<div id="navigation">
<ul id="tabnav">
   <li class="active"><a href="index.php"><span class=tbleu>Accueil</span></a></li>
   <li><a href="presentation.php"><span class=torange>Pr&eacute;sentation</span></a></li>
   <li><a href="realisations.php"><span class=torange>R&eacute;alisations</span></a></li>
   <li><a href="localisation.php"><span class=torange>Localisation</span></a></li>
   <li><a href="contact.php"><span class=torange>Contact</span></a></li>
</ul>
</div>

Et le code CSS qui va avec :

/* Navigation */
#navigation {
	background: #FEFEFE;
}
#navigation a {
	color: #FF6533;
}
#navigation a:hover, #navigation a:focus {
	background: #000000;
}

ul#tabnav
{
   font: bold 11px verdana, arial, sans-serif;
   list-style-type: none;
   padding-bottom: 24px;
   border-bottom: 2px solid #0000CC;
   margin-left: 10px;
}


ul#tabnav li
{
   float: left;
   height: 21px;
   background-color: #0000CC; /*bleu*/
   margin: 1px 2px 0 10px; /*espace entre bloc du menu*/
   border: 2px solid #0000CC;
}

ul#tabnav li.active
{
   border-bottom: 2px solid #FF3300;
   background-color: #FF3300; /*orange*/
}

#tabnav a
{
   float: left;
   display: block;
   color: #fff;
   text-decoration: none;
   padding: 4px;
}

#tabnav a:hover /*quand on passe la souris sur un bloc menu */
{
   background-color: #FF3300;
   color: #0000CC;
}

#tabnav li
{
   margin: 0;
   padding: 0;
   display: inline;
   list-style-type: none;
}
#tabnav a:link, #tabnav a:visited
{
   float: left;
   font-size: 15px;
   line-height: 14px;
   font-weight: bold;
   margin: 0 70px 4px 70px; /* espace texte dans les blocs menu*/
   text-decoration: none;
/*   color: #0200;*/
}

.torange
{
color: #FF3300;
}

.tbleu
{
color: #0000CC;
}

Merci encore pour votre temps et votre aide !
Modifié par gkgsl (16 Oct 2012 - 01:58)

Sylverdragon

16 Oct 2012 à 11:00

Bonjour,
Pour l'instant tu as ça :


#tabnav a:hover /*quand on passe la souris sur un bloc menu */
{
   background-color: #FF3300;
   color: #0000CC;
}

donc ça ne change la couleur de fond que du <a>.

Il faut le mettre sur le <li> pour que ça fonctionne correctement :

#tabnav li:hover /*quand on passe la souris sur un bloc menu */
{
   background-color: #FF3300;
   color: #0000CC;
}

Pour ces problèmes là, tu devrais utiliser Firebug, tu aurais vu "l'erreur" tout de suite.
Modifié par Sylverdragon (16 Oct 2012 - 11:00)

gkgsl

16 Oct 2012 à 11:33

Merci pour l'aide, le problème était toujours là. J'ai installé firebug, et en effet, ce module donne une bonne vision de l'interprétation du code.

Voici ce que j'obtiens :

upload/46584-menu3.png

On ne voit pas le texte car le navigateur continue à prendre dans la classe .torange au lieu de prendre dans le li:hover (de navigation ou tabnav)

Voici le code modifié : (li: hover du tabnav et du navigation)

#global {
	background: #181A10;
}

/* Navigation */
#navigation {
	background: #FEFEFE;
}
#navigation a {
	color: #FF6533;
}
#navigation li:hover, #navigation a:focus {
	background: #FF3300;
	color: #0000CC;
	border-bottom: 2px solid #FF3300;
}

ul#tabnav
{
   font: bold 11px verdana, arial, sans-serif;
   list-style-type: none;
   padding-bottom: 24px;
   border-bottom: 2px solid #0000CC; /*trait bleu sous menu*/
   margin-left: 10px; /* marge tout à gauche du menu*/
}


ul#tabnav li
{
   float: left;
   height: 21px;
   background-color: #0000CC; /*bleu*/
   margin: 1px 2px 0 10px; /*espace entre bloc du menu*/
   border: 2px solid #0000CC;
}

ul#tabnav li.active
{
   border-bottom: 2px solid #FF3300;
   background-color: #FF3300; /*orange*/
}

#tabnav a
{
   float: left;
   display: block;
   color: #fff;
   text-decoration: none;
   padding: 4px;
}

#tabnav li:hover /*quand on passe la souris sur un bloc menu */
{
   background-color: #FF3300;
   color: #0000CC;
}

#tabnav li
{
   margin: 0;
   padding: 0;
   display: inline;
   list-style-type: none;
}
#tabnav a:link, #tabnav a:visited
{
   float: left;
   font-size: 15px;
   line-height: 14px;
   font-weight: bold;
   margin: 0 70px 4px 70px; /* espace texte dans les blocs menu*/
   text-decoration: none;
/*   color: #0200;*/
}

.torange
{
color: #FF3300;
}

.tbleu
{
color: #0000CC;
}

Modifié par gkgsl (16 Oct 2012 - 12:06)

Sylverdragon

16 Oct 2012 à 16:03

Re-Bonjour,
Oui mais le truc c'est qu'il y a pas du tout besoin de ce class=torange (qui devrait d'ailleurs être écrit class="torange") ou class=tbleu.
En tout cas pas pour spécifier une couleur de texte ou de fond.

Donc
on récapitule :

#tabnav li /*normal */
{
   background-color: #0000CC;
   color: #FF3300;
}

#tabnav li:hover /*quand on passe la souris sur un bloc menu */
{
   background-color: #FF3300;
   color: #0000CC;
}

Et on enlève ça :

.torange
{
color: #FF3300;
}

.tbleu
{
color: #0000CC;
}

gkgsl

17 Oct 2012 à 20:58

Merci encore, j'ai appliqué ces changements, mais du coup le texte reste tout le temps blanc...
du coup, j'ai modifié le code comme suit mais je retombe sur le même problème (texte orange avec fond orange quand je passe la souris...
Une autre idée ? je désespère car tout semble OK dans le code pourtant Smiley ohwell

Merci d'avance

<body>
<div id="global">
	<div id="entete">entete</div>
	<div id="navigation">
<ul id="tabnav">
   <li class="active"><a href="index.php"><span class=tbleu>Accueil</span></a></li>
   <li><a href="presentation.php">Pr&eacute;sentation</a></li>
   <li><a href="realisations.php"><span class=torange>R&eacute;alisations</span></a></li>
   <li><a href="localisation.php"><span class=torange>Localisation</span></a></li>
   <li><a href="contact.php"><span class=torange>Contact</span></a></li>
</ul>
</div>
	<div id="contenu">...
    
    
    </div>
...

/* Général */
body {
	color: #F0E39E;
	background: #FEFEFE;
}
a {
	color: #FF6533;
}
a:hover, a:focus {
	color: #FF4C00;
}
strong {
	color: #A1B55D;
}

/* Page */
#global {
	background: #FEFEFE;
}

#entete {
	background: #181A10;
}

/* Navigation */
#navigation {
	background: #FEFEFE;
}
#navigation a {
	color: #FF6533;
}
#navigation li:hover, #navigation a:focus {
	background: #FF3300;
	color: #0000CC;
	border-bottom: 2px solid #FF3300;
}

ul#tabnav
{
   font: bold 11px verdana, arial, sans-serif;
   list-style-type: none;
   padding-bottom: 24px;
   border-bottom: 2px solid #0000CC; /*trait bleu sous menu*/
   margin-left: 10px; /* marge tout à gauche du menu*/
}


ul#tabnav li
{
   float: left;
   height: 21px;
   background-color: #0000CC; /*bleu*/
   color: #FF3300; /*ajout*/
   margin: 1px 2px 0 10px; /*espace entre bloc du menu*/
   border: 2px solid #0000CC;
}

ul#tabnav li.active
{
   border-bottom: 2px solid #FF3300;
   background-color: #FF3300; /*orange*/
   color: #0000CC;
}

#tabnav a
{
   float: left;
   display: block;
   color: #FF3300;
   text-decoration: none;
   padding: 4px;
}

#tabnav a:hover li:hover /*quand on passe la souris sur un bloc menu */
{
   background-color: #FF3300;
   color: #0000CC;
}

#tabnav li
{
   margin: 0;
   padding: 0;
   display: inline;
   list-style-type: none;
}
#tabnav a:link, #tabnav a:visited
{
   float: left;
   font-size: 15px;
   line-height: 14px;
   font-weight: bold;
   margin: 0 70px 4px 70px; /* espace texte dans les blocs menu*/
   text-decoration: none;
/*   color: #0200;*/
}

/*.torange
{
color: #FF3300;
}*/

.tbleu
{
color: #0000CC;
}

/* Contenu principal */
#contenu {
	height : 100%;
	color: #363B29;
	background: #cbd888;
}
#contenu a {
	color: #332510;
}
#contenu a:hover, #contenu a:focus {
	color: #6E5122;
}
#contenu strong {
	color: #181A12;
}

/* Pied de page */
#pied {
	color: #000000;
}

Modifié par gkgsl (17 Oct 2012 - 20:59)

_azerty_

17 Oct 2012 à 22:25

Bonsoir,

ton code est loin d'être optimisé et correct mais je vais te proposer une solution pour palier à ton problème:

Voici les lignes qui vont t'aider:

ul#tabnav li:hover{
	background-color:#FF3300;
}
ul#tabnav li:hover a .torange{
	color: #0000CC;
}

La premiere dit qu'au passage de la souris sur le li, le fond va changer.
La deuxieme dit qu'au passage de la souris sur le li, les éléments dont la class est .torange et qui sont contenu dans un a vont avoir une couleur bleue.

Il faut ensuite mettre en commentaire les lignes suivantes, qui font parasites:

/*#tabnav a:hover
{
   background-color: #FF3300;
   color: #0000CC;
}*/

Pour finir, voici comment optimisé ton menu: Tu peux voir qu'il vaut que tu sois exactement sur le texte pour pouvoir cliquer sur le lien. Pour que tout ton bouton soit cliquable, tu peux remplacer ton margin (= marge extérieur), par un padding (marge intérieur) pour la propriété #tabnav a:link, #tabnav a:visited .Et comme ton a est en display: block, ton bouton sera cliquable sur toute la surface.

Voici le code modifié:

	<div id="navigation">
<ul id="tabnav">
   <li class="active"><a href="index.php"><span class=tbleu>Accueil</span></a></li>
   <li><a href="presentation.php"><span class=torange>Pr&eacute;sentation</span></a></li>
   <li><a href="realisations.php"><span class=torange>R&eacute;alisations</span></a></li>
   <li><a href="localisation.php"><span class=torange>Localisation</span></a></li>
   <li><a href="contact.php"><span class=torange>Contact</span></a></li>
</ul>
</div>

/* Général */
body {
	color: #F0E39E;
	background: #FEFEFE;
}
a {
	color: #FF6533;
}
a:hover, a:focus {
	color: #FF4C00;
}
strong {
	color: #A1B55D;
}

/* Page */
#global {
	background: #FEFEFE;
}

#entete {
	background: #181A10;
}

/* Navigation */
#navigation {
	background: #FEFEFE;
}
#navigation a {
	color: #FF6533;
}
#navigation li:hover, #navigation a:focus {
	background: #FF3300;
	color: #0000CC;
	border-bottom: 2px solid #FF3300;
}

ul#tabnav
{
   font: bold 11px verdana, arial, sans-serif;
   list-style-type: none;
   padding-bottom: 24px;
   border-bottom: 2px solid #0000CC; /*trait bleu sous menu*/
   margin-left: 10px; /* marge tout à gauche du menu*/
}


ul#tabnav li
{
   float: left;
   height: 21px;
   background-color: #0000CC; /*bleu*/
   color: #FF3300; /*ajout*/
   margin: 1px 2px 0 10px; /*espace entre bloc du menu*/
   border: 2px solid #0000CC;
}

ul#tabnav li.active
{
   border-bottom: 2px solid #FF3300;
   background-color: #FF3300; /*orange*/
   color: #0000CC;
}

#tabnav a
{
   float: left;
   display: block;
   color: #FF3300;
   text-decoration: none;
   padding: 4px;
}



ul#tabnav li:hover{
	background-color:#FF3300;
}
ul#tabnav li:hover a .torange{
	color: #0000CC;
}

#tabnav li
{
   margin: 0;
   padding: 0;
   display: inline;
   list-style-type: none;
}
#tabnav a:link, #tabnav a:visited
{
   float: left;
   font-size: 15px;
   line-height: 14px;
   font-weight: bold;
   padding: 4px 70px; 
   text-decoration: none;
/*   color: #0200;*/
}

/*.torange
{
color: #FF3300;
}*/

.tbleu
{
color: #0000CC;
}

/* Contenu principal */
#contenu {
	height : 100%;
	color: #363B29;
	background: #cbd888;
}
#contenu a {
	color: #332510;
}
#contenu a:hover, #contenu a:focus {
	color: #6E5122;
}
#contenu strong {
	color: #181A12;
}

/* Pied de page */
#pied {
	color: #000000;
}

Bonne soirée

gkgsl

17 Oct 2012 à 23:15

Ouah ! Merci infiniment !
Cela marche exactement comme je le voulais !

Effectivement, c'était l'instruction color du .torange qui me gênait, et je ne connaissais pas cette astuce, merci Smiley cligne

Et super pour la seconde astuce pour rentre toute la surface cliquable !

Merci beaucoup et très bonne fin de soirée Smiley ravi

Peut-être juste une question, dans le code HTML, j'appelle une torange alors qu'elle est désactivéé dans le CSS, ce n'est pas un problème ?
Modifié par gkgsl (17 Oct 2012 - 23:18)

Sujet clos

CSS et mise en forme, CSS3

[Résolu] Problème changement de couleur d'un texte dans un hover