这是我做的一个鼠标点击事件的一个小案例,我就来简单地介绍一下吧!
.con button{
position: absolute;
top:25%;
left: 40%;
cursor: pointer;
}
.cont{
width: 300px;
height: 200px;
background: #C5C5C5;
position: absolute;
top: 28.5%;
left: 40%;
display: none;
}
.cont li{
list-style: none;
float: left;
padding-left: 22px;
line-height: 25px;
}
.cont li:hover{
color: red;
cursor: pointer;
text-decoration: underline;
}
.tu{
position: absolute;
cursor: pointer;
}
开始写里面的内容,打一个div在给他一个类,然后在里面打一个button标签在里面随便打几个文字,到css写样式给他一个绝对定位在移动他的位置,在设置鼠标移入指针就会变成小手。在button标签下面打一个ul在给他一个类里面包裹着li标签和文字,然后到css写ul里面的样式设置他的宽度和高度在给他一个背景颜色,在用绝对定位来移动里面的背景颜色的位置,再来就是写li标签里面的文字样式,去掉文字前面的点然后在设置他的左浮动人文字向左对齐,在设置他的左内边距和行高,最后在li标签的上面打一个img给他一个放置一张交叉的一个背景图片,到css写样式给他一个绝对定位和一个鼠标移入指针就变成小手。写好了之后在用(display:none)来隐藏背景和文字。
window .onload=function(){//页面加载事件
var contl =document.getElementById("contl");
var cont =document.getElementById("cont");
var tu =document.getElementById("tu");
contl .onclick =function(){
cont.style.display ="block";
};
tu .onclick =function(){
cont .style.display="none";
};
};
先到前面去在button标签ul标签和img标签后面都加上一个id里面在打上同样的类名,在到js里面输入一个页面加载事件一个大括号包裹起来,然后在获取前面几个的元素id,之后在让他如何显示然后关闭,第一个是获取button的一个点击按钮,第二个是获取ul标签里面的元素让他显示出来。相反的同样复制一份下来然后在获取到img的一个元素id的点击事件,下面在只改变分号里面的按钮。