Jquery创建一个层显示标题的内容且随鼠标移动

    <script src="Core/Public/js/jquery.js" type="text/javascript"></script>                //引入Jquery
    <style type="text/css">                                                                                        //编写创建的div的样式
        #tooltip
        {
            position: absolute;
            border: 1px #solid #333;
            background: #f7f5d1;
            padding: 1px;
            color: #333;
            display: none;
        }
    </style>
    <script type="text/javascript">                                                                            //编写JS代码
        $(function () {
            var x = 10;
            var y = 10;
            $("a.tooltip").mouseover(function (e) {                                                       //当鼠标指针从元素上移入时
                this.myTitle = this.title;
                this.title = "";
                var tooltip = "<div id='tooltip'>" + this.myTitle + "</div>";
                $("body").append(tooltip);
                $("#tooltip").css({ "top": (e.pageY  + y) + "px", "left": (e.pageX + x) + "px" }).show("fast");
            }).mouseout(function () {                                                                           //当鼠标指针从元素上移开时
                this.title = this.myTitle;
                $("#tooltip").remove();
            }).mousemove(function (e) {                                                                     //当鼠标指针从元素上移动时
                $("#tooltip").css({ "top": (e.pageY + y) + "px", "left": (e.pageX + x) + "px" });
            });
        });
    </script>

 

    //html代码

     <ul>
            <li><a href="#" class="tooltip" title="甜美宽松毛衣">1111111111111</a></li>
            <li><a href="#" class="tooltip" title="是撒啊得瑟得">2222222222222</a></li>
     </ul>