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
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr">
<head>
<title>simuler mouseenter et mouseleave</title>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<style type="text/css">
* {margin:0;padding:0;color:#ddd;}
body {margin:10px;background:#000;color:#ddd;font-size:1em;font-family:Helvetica, Arial, sans-serif;}
.conteneur {width:200px;height:200px;background:#333;}
.titre {display:none;background:#666;}
</style>
</head>
<body>
<div id="d1" class="conteneur">
<h1 class="titre">titre 1</h1>
</div>
<div class="conteneur">
<h1 class="titre">titre 2</h1>
</div>
<script type="text/javascript">
var FC = {
DOM: {
getElementsByClassName: function(classe, noeud, balise) {
var elements = [];
noeud = noeud || document;
if (document.getElementsByClassName) { elements = noeud.getElementsByClassName(classe); }
else {
balise = balise || "*";
var elementsCourants = noeud.getElementsByTagName(balise);
var pattern = new RegExp("(^|\\s)" + classe + "(\\s|$)");
for (var i=0,imax=elementsCourants.length; i<imax; i++) {
if (pattern.test(elementsCourants[i].className)) { elements.push(elementsCourants[i]); }
}
}
return elements;
}
},
Evenement: {
evenements: [],
ajouter: function(elm, evt, fn) {
var fni = function(e) { // prévient le comportement par défaut
if (fn(e)===false) { // false explicitement car peut être undefined en cas de délégation d'évènement
if (e.preventDefault) { e.preventDefault(); }
else { e.returnValue = false; }
}
};
if (document.addEventListener) { elm.addEventListener(evt, fni, false); }
else if (document.attachEvent) { elm.attachEvent("on" + evt, fni); }
FC.Evenement.evenements.push([elm, evt, fni]);
},
supprimer: function(elm, evt, fn) {
var evts = FC.Evenement.evenements;
for (var i=evts.length-1; i>=0; i--) {
if (evts[i][0]===elm && evts[i][1]===evt) {
if (document.removeEventListener) { elm.removeEventListener(evts[i][1], evts[i][2], false); }
else if (document.detachEvent) { elm.detachEvent("on" + evts[i][1], evts[i][2]); }
FC.Evenement.evenements.splice(i,1);
}
}
}
}
};
FC.Evenement.ajouter(document, "mouseover", function(e) {
var elm = e.target || event.srcElement;
var fn = function(n) { alert(n); }
if (elm.className.indexOf("conteneur")>-1) {
var elms = FC.DOM.getElementsByClassName("titre", elm, "h1");
for (var i=0, imax=elms.length;i<imax;i++) {
elms[i].style.display="block";
}
}
});
FC.Evenement.ajouter(document, "mouseout", function(e) {
var elm = e.target || event.srcElement;
var elmDestination = e.relatedTarget || event.toElement;
if (elm.className.indexOf("conteneur")===-1 && elmDestination.className.indexOf("titre")===-1) {
var elms = FC.DOM.getElementsByClassName("titre", document, "h1");
for (var i=0, imax=elms.length;i<imax;i++) {
elms[i].style.display="none";
}
}
});
</script>
</body>
</html> |
afficher un span
Répondre avec citation
Partager