28172 sujets

CSS et mise en forme, CSS3

Changement de la couleur de police au passage de la souris [Résolu]

Rebonjour,
au risque d'être lourd...
2è partie de mon problème, je voudrai qu'au passage de la souris sur le bloc et pas seulement sur le lien, le texte du lien change de couleur et passe en gras j'ai donc fait:
[code=css].case{
text-align:center;
float:left;
width:19.7%;
height:1.6em;
background-image:url("fondbase.jpg");
margin:auto;
border:solid 1px white;
}

.case:hover {background-image:url("fondeclair.jpg");font-weight:bold; color:#FFDA5A;}



Le texte passe bien en gras mais la couleur ne change pas, y a-t-il une interférence avec:
[code=css]a:link { text-decoration:none;font-family:arial;color:#702902;}
a:visited { text-decoration:none;font-family:arial;color:#702902;}
a:hover { text-decoration:none;font-weight:bold; color:#FFDA5A;}
a:active { text-decoration:none;font-family:arial;color:#702902;}


placé au dessus ? J'ai tenté plusieurs modifications sans effet...

Merci d'avance

A+
Philippe
Modifié par filtep (08 Feb 2010 - 10:20)
Salut,

Sans le code html qui va avec, impossible de te dire ce qui cloche, il te faudrait nous donner des précisions. Idéalement il serait même bien de nous fournir une page en ligne. Smiley cligne
Re-salut,

déjà : vu à quelle vitesse tu as recréé un sujet je te soupçonne de ne pas avoir lu Créer des menus simples en CSS comme cela t'était conseillé dans ton précédent sujet. C'est bien dommage car ton code html serait plus cohérent... et par ailleurs tu aurais plusieurs exemples répondant à ta question. Smiley cligne
Modifié par Heyoan (07 Feb 2010 - 16:02)
Salut,

si si, j'ai bien lu ce que tu m'avais recommandé, édité la source, testé, ajouté dans le CSS "color:yellow;" vu que ça marchait, (il n'y en a pas pour des heures non plus !) compris que le W3c recommande de faire des menus avec li plutot que des div, compris que IE n'interprète "hover" que sur les liens mais bon, comme je ne comprends pas pourquoi ça cloche dans mon code et que j'aime bien comprendre... voilà quoi... je suis en plein apprentissage alors je teste... Smiley smile
Celà dit si vous savez pourquoi "color" ne se modifie pas dans mon hover, ça m'interesse. Mais c'est promis je refais mon menu avec des <li> Smiley cligne

A+
Philippe
Modifié par filtep (07 Feb 2010 - 18:15)
filtep a écrit :
compris que le W3c recommande de faire des menus avec li plutot que des div
A vrai dire ce n'est pas une recommandation du W3C : c'est plutôt une pratique qui s'est imposée au fil du temps pour différentes raisons.

filtep a écrit :
mais bon, comme je ne comprends pas pourquoi ça cloche dans mon code et que j'aime bien comprendre... voilà quoi... je suis en plein apprentissage alors je teste...
Très bonne habitude. Smiley cligne

filtep a écrit :
Celà dit si vous savez pourquoi "color" ne se modifie pas dans mon hover, ça m'interesse. Mais c'est promis je refait mon menu avec des <li>
Comme demandé par Mikachu il faudrait voir ton code complet (et pourquoi pas à base de UL / LI / A) pour te répondre.

A vue de nez je dirais que cela vient d'une question de priorité des sélecteurs.
Alors voilà:
.navig{
margin-top:10px;
width:900px;
height:1.6em;
margin-left:auto;
margin-right:auto;
border:1px solid white;
list-style:none;
}

.navig li { 
    display: inline ; 
    margin-right: 1px ; 
    color: #702902 ; 
    background-image: url("fondbase.jpg"); 
    }

.navig li a { 
    padding: 4px 20px ; 
    background-image: url("fondbase.jpg"); 
    color: #702902 ; 
    border: 0px; 
    text-decoration:none;font-family:arial;color:#702902; 
    line-height: 1em ; 
    text-align: center ; 
    text-decoration: none ; 
    }

.navig li a:hover{ 
    background-image: url("fondeclair.jpg") ; 
    text-decoration:none;font-weight:bold; color:#FFDA5A; 
    }

puis
<ul class="navig">
  <li><a href=# onclick="document.cab.style.visibility='hidden'
                                       document.plan.style.visibility='hidden'
                                       document.plaques.style.visibility='visible';">Médecine Générale</a> </li>
  <li><a href=#>Dermatologie</a> </li>

  <li><a href=#>Ophtalmologie</a> </li>

  <li><a href=#>Soins dentaires</a> </li>
  <li><a href=#>Soins infirmiers</a> </li>
</ul>


Problèmes de la méthode ul et li à mon sens :
1-lors du passage du lien en gras toute la liste se décale (pas terrible !)
2- La largeur des "cases" dépend du texte qui y est inscrit (pas esthétique, il fait rajouter des espaces ? => peu pratique)
Et enfin entre les "cases" <li> apparait un débord de l'image de fond mais d'une hauteur moindre Smiley eek

Voilou, voilou...

Auriez vous un remède à ces 2 problèmes SVP?

Heyoan, le tuto sur la priorité des sélecteurs est un peu hardu Smiley fou
A+
Philippe
Modifié par Florent V. (08 Feb 2010 - 05:06)
filtep a écrit :
Problèmes de la méthode ul et li à mon sens [...]
As-tu bien lu (et compris Smiley langue ) tout le tuto ?

Un exemple :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test</title>
<style type="text/css">
body {
	margin:0;
	font-family: Arial, Helvetica, "Liberation Sans", FreeSans, sans-serif; 
}

#global {
	width: 900px; 
	margin: 0 auto;
	padding-top: 10px;
} 
 
#navig {
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: center;
	overflow: hidden;
} 
 
#navig li {
	float: left;
	width: 20%;
	color: #702902;
} 
 
#navig li a {  
	padding: 5px 0;
	display: block;
	background: yellow;
	text-decoration: none;
	color: #702902;  
	line-height: 1em ;  
} 
 
#navig li a:hover,
#navig li a:focus,
#navig li a:active {  
	background: red;
	font-weight: bold; 
	color: #FFDA5A;  
} 
 
</style> 
</head> 
<body>
<div id="global">
	<ul id="navig"> 
	  <li><a href="lien1.php">Médecine Générale</a> </li> 
	  <li><a href="lien2.php">Dermatologie</a> </li> 
	  <li><a href="lien3.php">Ophtalmologie</a> </li> 
	  <li><a href="lien4.php">Soins dentaires</a> </li> 
	  <li><a href="lien5.php">Soins infirmiers</a> </li> 
	</ul>
	<p>Suite du contenu...</p>
</div>
</body> 
</html>
PS : un lien devrait contenir une url... si JavaScript est désactivé il ne se passe rien sur un onclick.

filtep a écrit :
le tuto sur la priorité des sélecteurs est un peu hardu
C'est pas faux. Smiley lol
filtep a écrit :
je voudrai qu'au passage de la souris sur le bloc et pas seulement sur le lien, le texte du lien change de couleur et passe en gras

Belle description d'une erreur ergonomique courante.
Si je passe le pointeur sur le bloc et que la mise en forme change, je comprends que je suis sur une zone réactive, à priori une zone cliquable telle qu'un bouton ou un lien. Seulement, si je suis sur le bloc et non pas sur le lien, je vais cliquer dans le vide. Et là je vais me demander «mais qu'est-ce que c'est que cette merde, je clique et ça fait rien?».
À éviter.

Sinon, sur la technique pure, est-ce qu'un sélecteur comme .case:hover a {...} aurait une utilité?

filtep a écrit :
le tuto sur la priorité des sélecteurs est un peu hardu

Il faut souffrir pour être belle.
Modifié par Florent V. (08 Feb 2010 - 05:07)
Bonjour,

exact, le fait de cliquer sans effet est assez désagréable, je vais utiliser la méthode décrite par Heyoan, merci de votre patience...
A bientôt pour d'autres problèmes que je ne manquerai sans doute pas de rencontrer.

A+
Philippe
Sujet clos
Aller à