Problème avec :hover

**-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

Problème avec :hover

Survol d'un élément en CSS (:hover)

Vue hybride

Discussions similaires

Partager

Partager