悬浮到上面的时候变色，移开恢复正常
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{ margin: 0; padding: 0; } body{ background-color: #eee; } .nav{ position: fixed; right: 10px; top: 50px; width: 60px; background-color: #fff; } .nav ul{ list-style-type: none; } .nav a{ display: block; border-bottom: 1px solid #eee; padding-bottom: #333; color: #333; font-size: 14px; text-decoration:none; padding: 10px 10px 5px 10px; } </style> </head> <body> <div class="nav"> <ul> <li><a href="#">京东秒杀</a></li> <li><a href="#">特色优选</a></li> <li><a href="#">频道广场</a></li> <li><a href="#">为你推荐</a></li> </ul> </div> <script> var lis=document.querySelectorAll('li') for(var i=0;i<lis.length;i++){ lis[i].onmouseover=function(){ this.style.backgroundColor='#e1251b' this.children[0].style.color='#fff' } lis[i].onmouseout=function(){ this.style.backgroundColor='#fff' this.children[0].style.color='#333' } } </script> </body> </html>