1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>Document</title> 7 <style> 8 li{ 9 list-style: none; 10 } 11 a{ 12 text-decoration: none; 13 } 14 .nav>li{ 15 float: left; 16 } 17 .nav>li>a{ 18 margin-left: 40px; 19 } 20 .nav>li>ul{ 21 display: none; 22 } 23 .red{ 24 background-color: red; 25 } 26 </style> 27 </head> 28 <body> 29 <ul class="nav"> 30 <li> 31 <a href="">微博</a> 32 <ul> 33 <li><a href="">私信</a></li> 34 <li><a href="">评论</a></li> 35 <li><a href="">@我</a></li> 36 </ul> 37 </li> 38 <li> 39 <a href="">微博2</a> 40 <ul> 41 <li><a href="">私信2</a></li> 42 <li><a href="">评论2</a></li> 43 <li><a href="">@我2</a></li> 44 </ul> 45 </li> 46 <li> 47 <a href="">微博3</a> 48 <ul> 49 <li><a href="">私信3</a></li> 50 <li><a href="">评论3</a></li> 51 <li><a href="">@我3</a></li> 52 </ul> 53 </li> 54 </ul> 55 <script> 56 var nav=document.querySelector('.nav'); 57 var lis=nav.children; 58 for(var i=0;i<=lis.length;i++){ 59 lis[i].setAttribute('index',i);
//鼠标进入事件 60 lis[i].onmouseover = function() { 61 console.log(lis[i]); 62 this.children[1].style.display='block'; 63 this.children[0].style.backgroundColor='red'; 64 }
//鼠标离开事件 65 lis[i].onmouseout = function() { 66 this.children[1].style.display='none'; 67 this.children[0].style.backgroundColor=''; 68 } 69 } 70 </script> 71 </body> 72 </html>