1
2
<html>
3
<head>
4
<style>
5
ul
6
{
7
border:0.1px solid black;
8
list-style:none;
9
padding:0;
10
margin:0;
11
display:none;
12
}
13
li
14
{
15
border:0.1px solid black;
16
padding:5px;
17
}
18
.btn
19
{
20
padding:10px;
21
background-color:#007bff;
22
border:none;
23
color:white;
24
}
25
</style>
26
</head>
27
<body>
28
<h1>JavaScript on mouse leave</h1>
29
<p id="paragraph">this text will be hidden after mouse enter</p>
30
<button class="btn" id="btn">Enter mouse pointer</button>
31
<script>
32
let paragraph = document.getElementById('paragraph');
33
let btn = document.getElementById('btn');
34
btn.onmouseleave = function(){
35
paragraph.style.visibility = "hidden";
36
}
37
</script>
38
</body>
39
</html>