[读码时间] 提示框效果

说明：代码来自网络。注释为笔者学习时添加。
<!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>
View Code