JS控制鼠标点击事件

最新推荐文章于 2025-06-14 21:20:02 发布

转载最新推荐文章于 2025-06-14 21:20:02 发布 · 618 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/llz1314/p/5767944.html

文章标签：

#javascript #ViewUI

　　鼠标点击事件就是当鼠标点击元素时，就会出现另一个窗口，类似于百度首页中右上角的“登录”这个按钮，当鼠标点击

登录时，就会出现登录窗口。大体的意思就是这样，直接上代码了，简单易懂。

　　<!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>