<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>鼠标右键事件</title> <style> *{margin:0px;padding:0px;list-style:none;} #uls{ width:130px; height:auto; border:solid 1px #333; display:none; position:absolute; } #uls a{ text-decoration:none; line-height:30px; text-align:center; display:block; } #uls li{ width:130px; height:30px; border:solid 1px #eee; } </style> </head> <body> <ul id='uls'> <li><a href="">军事</a></li> <li><a href="">科技</a></li> <li><a href="">美女</a></li> <li><a href="">生活</a></li> <li><a href="">体育</a></li> </ul> <script> var uls = document.getElementById('uls'); var lis = document.getElementsByTagName('li'); window.oncontextmenu = function(e) { //获取x和y坐标 var x = e.clientX; var y = e.clientY; // console.log(x,y); uls.style.left = x+'px'; uls.style.top = y+'px'; uls.style.display = 'block'; return false; } for (var i = 0; i < lis.length; i++) { //鼠标移上去 lis[i].onmouseover = function(){ this.style.background='#ddd'; var as = this.children; for (var i = 0; i < as.length; i++) { as[i].style.color = 'red'; } } //鼠标移出来 lis[i].onmouseout = function(){ this.style.background=null; var as = this.children; for (var i = 0; i < as.length; i++) { as[i].style.color = ''; } } } window.onclick = function(){ uls.style.display = 'none'; } </script> </body> </html>