Discussion :

[calitom]

Bonjour,

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

Voici le code:

Code :

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

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 :

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

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

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 :

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

[MasterOfChakhaL]

Salut,

Les deux techniques sont correctes.
Cependant IE6 et inférieur ne reconnaissent le hover que pour les liens

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

[deY!]

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

Simule un hover en javascript avec onmouseover.

[calitom]

Comment modifier ceci en javascript:

Code :

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

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 :

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

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

[deY!]

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

Code :

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

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

Code :

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

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