JavaScript/mouse-out-mouse-over.html at master · eliCoding/JavaScript · GitHub

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
<!DOCTYPE html>

<htmllang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<metacharset="utf-8" />
<title>Mouse Out and Over event</title>
<styletype="text/css">
 .outClass {
font-family:'Franklin Gothic Medium','Arial Narrow', Arial, sans-serif;
font-size:12px;
color:#fff;
background-color:#00f;
 }
 .overClass {
font-family:'Franklin Gothic Medium','Arial Narrow', Arial, sans-serif;
font-size:12px;
color:#00f;
background-color:#fff;
 }

</style>
<scripttype="text/javascript">
functionrollOn(){
if(window.event.srcElement.className=="outClass"){
window.event.srcElement.className="overClass"
}
}
functionrollOff(){
if(window.event.srcElement.className=="overClass"){
window.event.srcElement.className="outClass"
}
}
//object_name.event_name = event_handler
document.onmouseover=rollOn;
document.onmouseout=rollOff;
</script>
</head>
<body>
<p>
<spanclass="outClass">Home&nbsp;</span>
<spanclass="outClass">products&nbsp;</span>
<spanclass="outClass">Downloads&nbsp;</span>
<spanclass="outClass">About Us&nbsp;</span>
<spanclass="outClass">Contact&nbsp;</span>

</p>
</body>
</html>