Discussion :

[nirvredred]

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 html :

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
 <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 css :

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

[LeXo]

t'as essayé ?

Code :

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

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

Code html :

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

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

[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.

[Erwan31]

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 :

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

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 :

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

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

Code :

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

1
2
3
4
5
 
#bouton1 a, #bouton2 a, #bouton3 a, #bouton4 a, #bouton5 a {
display:block;
height: 100%;
}

[Kerod]

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)