欢迎光临
我的个人博客网站

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


一、常用的鼠标事件

<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="

赞(0) 打赏
未经允许不得转载:张拓的天空 » JavaScript连载32-常用的鼠标事件
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏