Problème avec :hover [Résolu]

-Fly- · 13/02/2011, 17h45

Voila , Je veux faire un menu , qui peut changer 3 fois .
1) Si on est sur la page
2) Si on passe la souris dessus
3) aucun des deux autre (menu normal)

Pour ca j'ai dessiner trois menu sous photoshop a la suite que j'ai mis un en dessous des autres .

Du coté html ca donne ca

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html lang="en">
<meta http-equiv="Content-Type" content="text/html; charset=utf-/" />
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<head>
	<title></title>
</head>	
<body>
 
<a href="index.html"><div class="menu accueil-click"></div></a>
<a href="nouveautees.html"><div class="menu nouveautees"></div></a>
<a href="dossiers.html"><div class="menu dossiers"></div></a>
<a href="contact.html"><div class="menu contact"></div></a>
<a href="moncompte.html"><div class="menu moncompte"></div></a>	
 
</body>
</html>

Et en css cela

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
27
28
29
30
31
32
33
34
35
36
body
{
	background-color:#f2f2f2;
	width:750px;
	margin:auto;
	margin-top 25px;
}
 
.menu
{
	width: 150px;
	height: 54px;
	display:inline-block;
	background-image:url(menu.png);
	background-repeat: no-repeat;
	margin-right:-4px;
}
 
.accueil {background-position:-2px top;}
.nouveautees{background-position:-152px top;}
.dossiers{background-position:-302px top;}
.contact{background-position:-452px top;}
.compte{background-position:-602px top;}
 
.accueil :hover{background-position:-2px -54px;}
.nouveautees :hover{background-position:-152px -54px;}
.dossiers :hover{background-position:-302px -54px;}
.contact :hover{background-position:-452px -54px;}
.compte :hover{background-position:-602px -54px;}
 
 
.accueil-click{background-position:-2px -108px;}
.nouveautees-click{background-position:-152px -108px;}
.dossiers-click{background-position:-302px -108px;}
.contact-click{background-position:-452px -108px;}
.compte-click{background-position:-602px -108px;}

Les -54px et -108px designent donc les emplacement sur ma photo des deux autres menu différents au menu normal
quand je clique sur un lien ca marche le bouton change de background cependant le hover ne marche pas .

J'aurais aimé savoir ou se situe le probleme sachant que c'est sur qu'il ne se situe pas sur la photo ou il y a les 3 menus différents

Merci de votre aide

Bonne journnée

NoSmoking · 13/02/2011, 18h17

ne pas mettre d'espace

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

.accueil:hover{background-position:-2px -54px;}

-Fly- · 13/02/2011, 20h57

C'était bien ca en effet !!
Merci

13/02/2011, 18h17	#2
NoSmoking Modérateur Inscription : janvier 2011 Messages : 2 930 Détails du profil Informations personnelles : Sexe : Localisation : France, Isère (Rhône Alpes) Informations forums : Inscription : janvier 2011 Messages : 2 930 Points : 4 744 Points : 4 744	ne pas mettre d'espace Code : Sélectionner tout - Visualiser dans une fenêtre à part .accueil:hover{background-position:-2px -54px;}
	00

13/02/2011, 20h57	#3
-Fly- Membre du Club Étudiant Inscription : octobre 2010 Messages : 170 Détails du profil Informations personnelles : Localisation : France, Rhône (Rhône Alpes) Informations professionnelles : Activité : Étudiant Informations forums : Inscription : octobre 2010 Messages : 170 Points : 61 Points : 61	C'était bien ca en effet !! Merci
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email