-
Notifications
You must be signed in to change notification settings - Fork 17
/
Copy pathrollover.html
51 lines (39 loc) · 1.16 KB
/
rollover.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<title>rollover : sample</title>
<style>
a#myButton {display:block; background:#000; width:200px; padding:20px; font-family:Arial, Helvetica, sans-serif; font-size:12px; text-decoration:none; color:#000; border:#000 solid 1px;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<script>
///button color info
var buttonNormalColor = '#7e9469';
var buttonHoverColor = '#97aed0';
var buttonClickColor = '#5c7395';
///button rollover
function buttonRollOver(){
$(this).stop().css({'background-color':buttonHoverColor});
}
///button rollout
function buttonRollOut(){
$(this).css({'background-color':buttonNormalColor});
}
function clickButtonState(){
$(this).css({'background-color':buttonClickColor});
}
/////////////////////////////
$(document).ready(function(){
////apply normal color
$('a#myButton').css({'background':buttonNormalColor});
/////anchor link Hover States
$('a#myButton').hover(buttonRollOver, buttonRollOut);
///anchor link Click State
$('a#myButton').click(clickButtonState);
});
</script>
</head>
<body>
<a id="myButton" href="#">my button</a>
</body>
</html>