JavaScript连载32-常用的鼠标事件

  • A+
所属分类：Web前端
便宜好用的国外VPS推荐

一、常用的鼠标事件

<body>     <img src="img/img_05.png" alt="" width="250px">     <script>         window.onload = function (ev) {             var logo = document.getElementsByTagName("img")[0];              //1.新的事件             logo.onmouseover = function (e1) {                 console.log("-----");//鼠标进入图片就会触发,也就悬停在图片上                 this.setAttribute("src","img/img_02.png");             }                          logo.onmouseleave = function (e2) {                 this.setAttribute("src","img/img_05.png");//鼠标离开图片就会触发             }         }     </script> </body> </html>

JavaScript连载32-常用的鼠标事件

二、侧边的显示和隐藏

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>D32_3_erweimaXianshi</title>     <style>         *{             margin:0;             padding:0;             list_style:none;         }         #e_coder{             width:500px;             height:500px;             background:url("img/img_05.png") no-repeat;             position:fixed;             top:40%;             left:0;             cursor:pointer;         }         #e_app{             position:absolute;             left:50px;             top:-50px;             display: none;         }     </style> </head> <body>     <div id="e_coder">         <div id="e_app">             <img src="img/img_02.png" alt="
便宜好用的国外VPS推荐