Question sur hover

Version imprimable

Question sur hover

Bonjour,

Est il possible de personnaliser la methode hover à une classe, ou cela ne marche qu'avec un objet?

Voici le code:

Code:

1
2
3
4
5
6
7
8
9
 
<div id="boxHandle1" class="box">
</div>
<div id="boxHandle2" class="box">
</div>
<div id="boxHandle3" class="box">
</div>
<div id="boxHandle4" class="box">
</div>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
.box {
	border-top: 1px dotted Gray;
	border-left: 1px dotted Gray;
	margin: 5px;
	padding: 0px;
	background: transparent none repeat scroll 0% 50%;
	-moz-background-clip: initial;
	-moz-background-origin: initial;
	-moz-background-inline-policy: initial;
	width: 250px;
	height: 123px;
	z-index: 1;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 12px;
	top: auto;
}

1è solution:
Puis-je faire ca?:

Code:

1
2
3
4
5
6
7
8
9
10
11
 
.box:hover {
  	 display: block;
    border: 1px dotted rgb(223, 88, 0);
    background: transparent none repeat scroll 0% 50%;
    -moz-background-clip: initial;
    -moz-background-origin: initial;
    -moz-background-inline-policy: initial;
    width: 250px;
    height: 123px;
    }

2è solution:
Ou je suis obligé de faire ca?:

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
 
#boxHandle1:hover {
  	 display: block;
    border: 1px dotted rgb(223, 88, 0);
    background: transparent none repeat scroll 0% 50%;
    -moz-background-clip: initial;
    -moz-background-origin: initial;
    -moz-background-inline-policy: initial;
    width: 250px;
    height: 123px;
    }
#boxHandle2:hover {
  	 display: block;
    border: 1px dotted rgb(223, 88, 0);
    background: transparent none repeat scroll 0% 50%;
    -moz-background-clip: initial;
    -moz-background-origin: initial;
    -moz-background-inline-policy: initial;
    width: 250px;
    height: 123px;
    }
#boxHandle3:hover {
  	 display: block;
    border: 1px dotted rgb(223, 88, 0);
    background: transparent none repeat scroll 0% 50%;
    -moz-background-clip: initial;
    -moz-background-origin: initial;
    -moz-background-inline-policy: initial;
    width: 250px;
    height: 123px;
    }
#boxHandle4:hover {
  	 display: block;
    border: 1px dotted rgb(223, 88, 0);
    background: transparent none repeat scroll 0% 50%;
    -moz-background-clip: initial;
    -moz-background-origin: initial;
    -moz-background-inline-policy: initial;
    width: 250px;
    height: 123px;
    }

Autrement dis, comment faire si la 1ère solution ne marche pas?
Merci d'avance.

22/03/2007, 15h27
MasterOfChakhaL

Salut,

Les deux techniques sont correctes.
Cependant IE6 et inférieur ne reconnaissent le hover que pour les liens
22/03/2007, 15h46
calitom

Pourtant j'utilise IE7 et ca ne marche pas...
J'utilise le csshover.htc qui est censé rendre le hover compatible avec IE, mais sans succès!

Une idée?
22/03/2007, 16h31
deY!

csshover.htc ne fonctionne avec xp sp2 apparement.
Encore moins sous IE7.

Simule un hover en javascript avec onmouseover.

Comment modifier ceci en javascript:

Code:

1
2
 
display: block; border: 1px dotted rgb(223, 88, 0); background: transparent none repeat scroll 0% 50%; -moz-background-clip: initial; -moz-background-origin: initial; -moz-background-inline-policy: initial; width: 250px; height: 123px;

J'ai essayé en faisant ceci:

Code:

1
2
3
4
 
function hover(idelement){
document.getElementById(idelement).style="display: block; border: 1px dotted rgb(223, 88, 0); background: transparent none repeat scroll 0% 50%; -moz-background-clip: initial; -moz-background-origin: initial; -moz-background-inline-policy: initial; width: 250px; height: 123px;";
}

Mais ca ne marche pas, j'ai une erreuer...

le plus simple serait que tu change la classe au lieu du style... t'aurais moins de texte
Code:

1 2 3 4 5 6 7 8 .toto { background-color:#FFFFFF; } .totohover { background-color:#CCCCCC; }
Code:

1 2 3 function hover(idelement){ document.getElementById(idelement).setAttribute("class", "totohover"); }

22/03/2007, 17h25
mic79

salut,

moi j'utilise le le hover avec ie7 et firefox tout marche correctemement (hover sur les lignes d'un tableau lors du passge de la souris). En revanche pense a te mettre en xhtml transitionnal ou strict car sinon ca na marche pas

Mic
22/03/2007, 17h29
calitom

ca ne marche pas...
Est ce que cette syntaxe fonctionne avec IE?
22/03/2007, 17h37
calitom

C quoi l'en tete pour mettre en xhtml transitionnal?
22/03/2007, 17h39
MasterOfChakhaL

Dans la FAQ: http://xhtml.developpez.com/faq/?pag...#html_doctypes
22/03/2007, 17h42
calitom

Je viens de le faire, effectivement le hover marche, mais toute ma mise en page a changer, et il y a pleins de fonctions que j'utilisais qui marche plus, du genre le div n'est plus contraint dans une zone ...

Y a t'il un moyen de gérer ca sans revérifier tout son code pour l'adapter à ce nouvel en tete?
22/03/2007, 17h50
MasterOfChakhaL

ben pas spécialement...

En mettant le doctype, c'est comme si tu venais le mode d'emploi de ton document au navigateur.
Quand tu ne mets rien, il se débrouille et affiche les pages comme il l'aurait fait avec les pages d'il ya 10ans...

Ce qui change surtout, c'est le modèle de boite.
Les propriétés à revoir seront surtout les margin padding et border (si ca peut t'aider)