鼠標點擊事件就是當鼠標點擊元素時，就會出現另一個窗口，類似於百度首頁中右上角的“登錄”這個按鈕，當鼠標點擊
登錄時，就會出現登錄窗口。大體的意思就是這樣，直接上代碼了，簡單易懂。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登錄消失</title>
<style type="text/css">
#log{
width: 100px;height: 30px;
background: green;
text-align: center;
}
#login{
margin: 0;padding: 0;
display: inline-block;
color: black;
line-height: 30px;
}
.qq{
position: absolute;
left: 0;top: 0;
width: 100%;height: 100%;
background: black;
opacity: 0.15;
text-align: right;
}
.dian{
text-decoration: none;
font-size: 50px;
width: 150px;
height: 50px;
background: white;
display: block;
margin: 100px auto 0px;
color: black;
}
</style>
</head>
<body>
<div id="log">
<a href="#" id="login">登錄</a>
</div>
<div class="qq">
<a href="#" class="dian">×</a>
</div>
<script type="text/javascript">
var login = document.getElementById('login');
var qq = document.getElementsByClassName('qq');
var dian = document.getElementsByClassName('dian');
qq[0].style.display = 'none';
login.onclick = function(){
qq[0].style.display = 'block';
}
dian[0].onclick = function(){
qq[0].style.display = 'none';
}
</script>
</body>
</html>
一開始沒有點擊登錄，直接刷新的網頁如圖：
當點擊登錄時，頁面就會變成這樣：
當點擊圖中的X號時，該頁面就會消失，結果就是第一張圖片。