鼠标悬停提示效果javascript

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>鼠标悬停提示效果</title>
    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <style type="text/css">
        ol{
            width: 300px;
            font: 16px/30px "微软雅黑";
            color: #0a8cd2;
            margin: 20px auto;
        }
        li{
            cursor: pointer;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            margin: 5px 0px;
        }
        li:hover{
            color: #f60;
        }
        #div{
            position: absolute;
            display: inline-block;
            background-color: #666;
            color: #fff;
            padding: 0px 10px;
            border-radius: 4px;
            left: 0px;
            top: 0px;
        }
    </style>
</head>
<body>
    <ol>
        <li>铁路部门:火车票丢失需“先补买再退款”</li>
        <li>新修订新疆宗教事务条例施行 禁止宣扬极端思想</li>
        <li>长征火箭从天而降瞬间被拍下 民众围观(图)</li>
        <li>呼格父母:今后不再上访 打算先给儿子买个好墓地</li>
        <li>中国驻印尼使馆:印尼未对持普通护照中方人员免签</li>
        <li>陕西圈养大熊猫发生犬瘟热  一8岁大熊猫死亡</li>
        <div id="div">

        </div>
    </ol>
    <script type="text/javascript">
        var lis = document.getElementsByTagName("li");
        var div = document.getElementById("div");
        for( var i = 0 ; i < lis.length ; i ++ ){
            lis[i].onmousemove = function (event){
                var event = event || window.event;
                divMove(event.clientX+10,event.clientY+10,this.innerHTML);
            }
            lis[i].onmouseout = function (){
                div.style.display = "none";
            }
        }
        function divMove(x,y,html){
            div.innerHTML = html;
            div.style.display = "inline-block";
            div.style.left = x + "px";
            div.style.top = y + "px";
        }
    </script>
</body>
</html>

推荐阅读更多精彩内容