鼠标点击事件案例

 

 

.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;
        }

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的点击事件，下面在只改变分号里面的按钮。