zhuyu19911016520

记录开发中的点点滴滴

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>

 

 

阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/zhuyu19911016520/article/details/17091199
上一篇JS检测对象中是否有某个属性或方法
下一篇Jquery创建一个层,鼠标移动到层上面不消失
想对作者说点什么? 我来说一句

jquery div 跟随鼠标移动

mhhyoucom mhhyoucom

2014-03-25 09:38:37

阅读数:3003

没有更多推荐了,返回首页

关闭
关闭