鼠标点击事件就是当鼠标点击元素时,就会出现另一个窗口,类似于百度首页中右上角的“登录”这个按钮,当鼠标点击
登录时,就会出现登录窗口。大体的意思就是这样,直接上代码了,简单易懂。
登录消失
#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;
}
登录
×
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';
}
一开始没有点击登录,直接刷新的网页如图:
当点击登录时,页面就会变成这样: