petite question HOVER

Version imprimable

bonjour tous le mondes! je me trouve bloqué car j'ai fais plusieurs <div> pour ainserer les différents boutons de mon menu, et je voudrais faire un HOVER en css pour que l'image change a la survole du curseur :)
si quelqu'un a une solution, je laisse le code source.Merci

html:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 <div id="bouton1">
</div>
 
<div id="bouton2">
</div>
 
<div id="bouton3">
</div>
 
<div id="bouton4">
</div>
 
<div id="bouton5">
</div>
 
<div id="bouton6">
</div>

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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
 #bouton1
{
width: 91px;
height: 50px;
border: 0px solid #FFFFFF;
background-image:url(images/bouton1.png);
margin-left: 57px;
margin-top: -84px;
padding-top: 34px
}
 
#bouton2
{
width: 82px;
height: 50px;
border: 0px solid #FFFFFF;
background-image:url(images/bouton2.png);
margin-left: 146px;
margin-top: -84px;
padding-top: 34px
}
 
#bouton3
{
width: 98px;
height: 50px;
border: 0px solid #FFFFFF;
background-image:url(images/bouton3.png);
margin-left: 228px;
margin-top: -84px;
padding-top: 34px
}
 
#bouton4
{
width: 86px;
height: 50px;
border: 0px solid #FFFFFF;
background-image:url(images/bouton4.png);
margin-left: 326px;
margin-top: -84px;
padding-top: 34px
}
 
#bouton5
{
width: 95px;
height: 50px;
border: 0px solid #FFFFFF;
background-image:url(images/bouton5.png);
margin-left: 413px;
margin-top: -84px;
padding-top: 34px
}
 
#bouton6
{
width: 82px;
height: 50px;
border: 0px solid #FFFFFF;
background-image:url(images/bouton6.png);
margin-left: 508px;
margin-top: -84px;
padding-top: 34px
}

t'as essayé ?

Code:

1
2
3
4
5
6
#bouton3{
background-image:url(images/bouton3.png);
}
#bouton3:hover{
background-image:url(images/bouton3hover.png);
}

Code:

1
2
<div id="bouton3">
</div>

28/02/2008, 19h22
Kerod
Tu as deux solutions :
- Utiliser des a
- Utiliser du javascript
Je dis ça c'est tout simplement parce que les pseudo-classes ne sont pas compatibles IE6 et inférieurs.
28/02/2008, 19h53
Erwan31
Citation:

Envoyé par Kerod

Je dis ça c'est tout simplement parce que les pseudo-classes ne sont pas compatibles IE6 et inférieurs.

Salut Kerod,
comme tu dois le savoir elles ne sont pas implémentées sur les élément autres que les liens mais fonctionnent très bien avec les liens, excepté si on les combine (sur IE6 et infèrieur).
Exemple :

Code:

a:link:hover, a:visited:hover

IE7 a rectifié le tir à ce niveau là.

@nirvredred

Donc une des solutions que prpose Kerod (a) en exemple:
Code:

1 2 3 <div id="bouton2"> <a>...<a/> </div>
Code:

1 2 3 4 5 #bouton1 a, #bouton2 a, #bouton3 a, #bouton4 a, #bouton5 a { display:block; height: 100%; }
28/02/2008, 20h39
Kerod

Citation:

Envoyé par Erwan31

Salut Kerod,
comme tu dois le savoir elles ne sont pas implémentées sur les élément autres que les liens mais fonctionnent très bien avec les liens, excepté si on les combine (sur IE6 et infèrieur).

C'est exactement ce que je voulais dire étant donné que j'ai annoncé avant d'utiliser la balise a.

j'aurai dû préciser dans ma dernière phrase que c'était pour les balises qu'il utilisait (mais c'était sous-entendu) ;)