html
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<div>
<div class="sites" onmouseover="showDes('first')" onmouseout="hideDes('first')">
First</div>
<div class="description" id="first">
first description
</div>
</div> <br />
<div>
<div class="sites" onmouseover="showDes('second')" onmouseout="hideDes('second')" >Second</div>
<div class="description" id="second">
second description
</div>
</div>
</body>
</html>
Enter to Rename, Shift+Enter to Preview
css
css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
body {
background-color: skyblue;
}
.sites {
padding: 5px 10px;
height: 100%;
background-color: green;
}
.description {
display: none;
height: 50px;
width: 100px;
border: 1px solid;
background-color: white;
}
Enter to Rename, Shift+Enter to Preview
js
js
1
2
3
4
5
6
7
8
9
10
11
function showDes(x){
y = document.getElementById(x)
y.style.display = "block"
}
function hideDes(x){
y = document.getElementById(x)
y.style.display = "none"
}
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run