Web-Programming-Lab/lab3b.html at master · ritesh-29/Web-Programming-Lab · 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
<html>
	<head>
		<script type="text/JavaScript">
			var oripos;
			function movein(curr)
			{
				newstack= document.getElementById(curr).style;
				oripos=newstack.zIndex;
				newstack.zIndex="10";
			}
			function moveout(curr)
			{
				document.getElementById(curr).style.zIndex=oripos;
			}
		</script>
		<style type="text/css">
			p.one
			{
				padding:1in;
				position:absolute;
				left:100px;
				top:50px;
				background-color:#128ABC;
				width:150px;
				z-index:5;
			}
			p.two
			{
				padding:1in;
				position:absolute;
				left:130px;
				top:60px;
				background-color:#998ABC;
				width:150px;
				z-index:3;
			}
			p.three
			{
				padding:1in;
				position:absolute;
				left:150px;
				top:70px;
				background-color:#FF8AFF;
				width:150px;
				z-index:1;
			}
			p:hover
			{
				background-color:#111fff;
			}

		</style>
	</head>
	<body>
		<p class="one" id="stack1" onmouseover="movein('stack1')" onmouseout="moveout('stack1')">This is para 1...</p>
		<p class="two" id="stack2" onmouseover="movein('stack2')" onmouseout="moveout('stack2')">This is para 2...</p>
		<p class="three" id="stack3" onmouseover="movein('stack3')" onmouseout="moveout('stack3')">This is para 3...</p>
	</body>
</html>