说明：代码来自网络。注释为笔者学习时添加。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>提示框效果</title> <style> body, div, h2, ul, li{ /*清除内外边距*/ margin:0; padding:0; } body{ font:12px/1.5 Tahoma; /*行高为18px*/ } ul{ list-style-type:none; /*清除列表样式*/ } #outer{ width:560px; border:1px solid #333;/*黑色*/ margin:10px auto;/*左右置中*/ padding:0 0 10px 10px; } #outer h2{ line-height:30px; text-align:center; /*居中*/ margin-top:10px; } #outer ul:after{ content:"."; display:block; height:0; clear:both; /*清除浮动*/ visibility:hidden; } #outer ul{ zoom:1; } #outer ul li{ position:relative; /*父元素设为相对，作为字元素的参照*/ float:left; border:1px solid #333; margin:10px 10px 0 0; display:inline; } #outer ul li img{ position:absolute;/*子元素绝对定位 */ top:-14px; left:-14px; display:none;/*隐藏*/ border:2px solid #999;/*灰色*/ cursor:crosshair;/*十字*/ } #outer ul li a{ color:#666; width:80px; height:80px; display:block; background:#f0f0f0;/*灰白*/ text-decoration:none; padding:10px; } #outer ul li a strong{ display:block; } .zindex{ z-index:1; } </style> <script> window.onload = function () {//文档加载后执行 var oLi = document.getElementsByTagName("li");//获取所有的li元素 var oA = document.getElementsByTagName("a");//获取所有a元素 var oImg = document.getElementsByTagName("img"); for (var i = 0; i < oLi.length; i++) { oA[i].index = oImg[i].index = i;//添加index属性并赋值 oA[i].onmouseover = function () { oLi[this.index].className = "zindex";//添加类 oImg[this.index].style.display = "block";//设置dispaly值 }; oA[i].onmouseout = function () { oLi[this.index].className = "";//去除类 oImg[this.index].style.display = "none";//设置为none，隐藏 }; oImg[i].onmouseover = function () { oLi[this.index].className = "zindex"; this.style.display = "block"; }; oImg[i].onmouseout = function () { oLi[this.index].className = ""; this.style.display = "none"; } } } </script> </head> <body> <!--div包裹一个2级标题和一个ul列表--> <div id="outer"> <h2>名车车标展示-鼠标移过显示车标</h2> <ul> <li> <a href="javascript:;" title="BMW 宝马汽车"><strong>BMW</strong>宝马汽车</a> <img src="img/1.jpg" alt="BMW 宝马汽车" /> </li> <li> <a href="javascript:;" title="BMW 宝马汽车"><strong>BMW</strong>宝马汽车</a> <img src="img/1.jpg" alt="BMW 宝马汽车" /> </li> <li> <a href="javascript:;" title="BMW 宝马汽车"><strong>BMW</strong>宝马汽车</a> <img src="img/1.jpg" alt="BMW 宝马汽车" /> </li> <li> <a href="javascript:;" title="BMW 宝马汽车"><strong>BMW</strong>宝马汽车</a> <img src="img/1.jpg" alt="BMW 宝马汽车" /> </li> <li> <a href="javascript:;" title="BMW 宝马汽车"><strong>BMW</strong>宝马汽车</a> <img src="img/1.jpg" alt="BMW 宝马汽车" /> </li> <li> <a href="javascript:;" title="BMW 宝马汽车"><strong>BMW</strong>宝马汽车</a> <img src="img/1.jpg" alt="BMW 宝马汽车" /> </li> <li> <a href="javascript:;" title="BMW 宝马汽车"><strong>BMW</strong>宝马汽车</a> <img src="img/1.jpg" alt="BMW 宝马汽车" /> </li> <li> <a href="javascript:;" title="BMW 宝马汽车"><strong>BMW</strong>宝马汽车</a> <img src="img/1.jpg" alt="BMW 宝马汽车" /> </li> <li> <a href="javascript:;" title="BMW 宝马汽车"><strong>BMW</strong>宝马汽车</a> <img src="img/1.jpg" alt="BMW 宝马汽车" /> </li> <li> <a href="javascript:;" title="BMW 宝马汽车"><strong>BMW</strong>宝马汽车</a> <img src="img/1.jpg" alt="BMW 宝马汽车" /> </li> </ul> </div> </body> </html>