<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <style type="text/css"> body{ margin:0; padding:0;} .card{ 200px; height:100px; background:#eee; border:1px solid #555; position:absolute; display:none;} .test{ font-size:12px;} .test li{ height:20px; 100px; background:#eee; text-align:center; line-height:20px; margin-bottom:600px; list-style:none; cursor:pointer;} </style> <script type="text/javascript"> window.onload = function(){ var liArr = $("test").getElementsByTagName("li"); for(var i=0;i<liArr.length;i++){ liArr[i].onmouseover = function(){ $("card").style.display = "block"; var sh = document.documentElement.scrollTop || document.body.scrollTop; var tx = this.offsetLeft; var ty = this.offsetTop; var th = this.offsetHeight; var ch = $("card").offsetHeight; $("card").style.left = tx + "px"; $("card").style.top = (ty - sh > ch ? ty-ch : ty + th) + "px"; } liArr[i].onmouseout = function(){ $("card").style.display = "none"; } } } function $(id){ return document.getElementById(id); } </script> </head> <body> <div class="card" id="card"></div> <div class="test" id="test"> <ul> <li>测试</li> <li>测试</li> <li>测试</li> </ul> </div> </body> </html>