[CSS 2.1] a:hover et google chrome [Résolu]

[bob633]

Bonjour,

Voilà je viens de créer un site, et sur mon menu je fais un effet d'hover. C'est-à-dire je change la couleur de la case du menu. Cependant cela fonctionne niquel sur firefox et internet explorer, mais rien se passe sous google chrome. J'ai vu sur le net que cela à l'air normal, mais je trouve ça vraiment étonnant de la part d'un navigateur de google !

Avez-vous les même soucis ? Est-ce qu'il existe une ristourne pour google chrome ? Car le site perd un bon intérêt si les effets hover css ne fonctionne pas :s

J'ai vu qu'on pouvait passer par le hack css, mais là je sais pas trop quoi utiliser ... J'ai aussi vu des fonctions Javascript, mais j'ai pas trop envi de rajouter du javascript pour ça.

edit : J'ai oublié de préciser que tout mes hover sont sur des balises a

Merci

[kOrt3x]

Bonjour,

Pourrais déjà nous montrer un peu de ton code pour voir s'il est correct ?

Merci.

[bob633]

D'accord :

Bout du css

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
#menu #menu_general #corps a 
{ 
	color:#2e2e2e; 
	text-decoration:none; 
}
 
#menu  #menu_general #corps a:hover 
{ 
	color:#FFF; 
	display:block; 
	margin-top:-7px; 
	padding-top:6px;
	margin-bottom:-12px;
	background-repeat:no-repeat;  
	width:184px; 
	height:26px;
	text-decoration:none; 
}
 
#menu #menu_general #corps a:hover.class
{  
	background-image:url(../images/menu/hover_menu.png);
	width:184px; 
	height:26px;
	text-decoration:none;
}

Bout du fichier php :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div id="menu">
<div id="menu_general">
	<div id="titre">Titre</div> 
		<div id="corps">
			<ul>
				<li><a href="site/fichier1.php" title="Histoire des ferias de la création à 2011" class="class">&nbsp;&nbsp;Histoire</a></li> 
				<li><a href="site/fichier2.php" title="Dates des ferias 2011" class="class">&nbsp;&nbsp;Dates</a></li> 
				<li><a href="site/fichier3.php" title="Conseils pratiques, tenue festayre, foulard, cinta, ..." class="class">&nbsp;&nbsp;Conseils</a></li> 
				<li><a href="site/fichier4.php" title=" programmes des fêtes 2011 : corridas, courses landaises, encierro,..." class="class">&nbsp;&nbsp;Programmes des fêtes</a></li> 
				<li><a href="site/fichier5.php" title="Bus, train et covoiturage" class="class">&nbsp;&nbsp;Comment venir</a></li> 
			</ul>       
		</div>
	</div>
</div>

J'ai aussi un autre menu, sans balise li comme ceci :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
<div id="menu">
<div id="menuHeader">  
		<table>
			<tr>
				<td width="250px" align="center"><a href="fichier1.php" title="Accueil du site" >Accueil</a></td>
				<td width="250px" align="center"><a href="forum/fichier2.php" title="Forum les ferias" >Forum</a></td>
				<td width="250px" align="center"><a href="site/fichier3.php" title="Laisser un petit message" >Livre d or</a></td>
				<td width="250px" align="center"><a href="site/fichier4s.php" title="Partenaire du site les-ferias 2011" >Partenaires</a></td> 
			</tr>
		</table>
	</div>
</div>

Bout du css :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
#header #menuHeader {
	height:32px;
	padding-top:183px;
	font-size: 1.2em;
	color:white;
	font-weight: bold;
}
 
#header #menuHeader a 
{
	color:#FFFFFF; 
	text-decoration:none;  
}
 
#header #menuHeader a:hover 
{ 
	color:#FF0000; 
	display:block;
}

Voilà ça fonctionne niquel sous IE 8 et Firefox, mais nada su google chrome

[nadox]

Bonjour,

http://www.google.com/support/forum/...88c31b97&hl=en
D'après cette discussion il semble que le 'display:block' soit en cause...

Il faudrait donc que les liens soit déjà en 'display:block' au lieu de le faire seulement sur le hover...

[bob633]

Je sais pas comment te remercier .. ça fonctionne !

J'y aurais même pas pensé :/

Merci beaucoup en tout cas !

[nadox]

Je n'y ai pas pensé moi-même

http://www.google.com/search?client=ubuntu&channel=fs&q=chrome+a%3Ahover&ie=utf-8&oe=utf-8

http://www.google.com/search?client=ubuntu&channel=fs&q=chrome+a%3Ahover&ie=utf-8&oe=utf-8