[前端] js滑鼠停留事件
阿新 • • 發佈：2018-12-25
在寫某個網頁作業時，要用到這個基本技能，就是滑鼠放到某一選項上變個色，移開後又變回來。
這個在網頁中很常見，實現也很簡單，寫一個小的例子，放在這裡方便以後作為模板用。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html lang="zh-CN"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>js控制元件停留事件</title> <link href="../css/my.css" rel="stylesheet"> <script type="text/javascript"> window.onload = function(){ var arr = document.getElementsByName('mytype'); for(var i = 0;i<arr.length;i++){ arr[i].onmouseover = function(){ this.className = 'td1'; } arr[i].onmouseout = function(){ this.className = 'td2'; } } } </script> <body> <div id="main" style="margin:auto 0"> <div style="margin-top:2em;" align="center"> <div name = "mytype" class = "td2">控制元件一</div> <div name = "mytype" class = "td2">控制元件二</div> <div name = "mytype" class = "td2">控制元件三</div> <div name = "mytype" class = "td2">控制元件四</div> </div> </div> </body> </html>
在css資料夾中的my.css
.td1{
background-color:#666666;
height:50px;
}
.td2{
background-color:#ffffff;
height:50px;
}