JavaScript_test/Hover test.html at master · andychiu923/JavaScript_test · 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
49
50
51
52
53
54
55
56
57
58
59
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Hover test</title>
	<style type = "text/css">
		.large {
			font-size: 15px;
		}
		.small {
			font-size: 10px;
		}
		.line {
			border: 1px solid #333;
			cursor: pointer;
		}
		.selected {
			font-weight: bold;
			background-color: gray;
		}
		.hidden {
			display: none;
		}
		.hover {
			cursor: pointer;
			background-color: yellow;
		}
	</style>
	<script src="jquery-3.2.1.min.js"></script>
	<script>
		$(document).ready(function() {
			$('span').addClass('line');
			$('#switcher').click(function(event) {
				if ($(event.target).is('span')) {
					var className = event.target.id;
					$('p').removeClass().addClass(className);
					$('#switcher span').removeClass('selected');
					$(event.target).addClass('selected');
					event.stopPropagation();
				}
			});
			$('#switcher h3').hover(function() {
				$(this).addClass('hover');
			}, function() {
				$(this).removeClass('hover');
			});
		});
	</script>
</head>
<body>
	<div id="switcher">
		<h3>選擇字型大小</h3>
		<span id="default">標準</span>
		<span id="large">放大</span>
		<span id="small">縮小</span>
	</div>
	<p>jQuery Event Handle</p>
</body>
</html>