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

原创 2013年12月03日 10:02:50

    <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>

 

 

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

用css3实现鼠标移入在原来的层上面显示另一个层的动画效果

演示效果       这是当鼠标移入会在原来的层上显示另一个层的动画,我这个页面里有很多项都需要用这个效果,之前我想用js来实现这个效果,不过弹出来的层的位置不好固定,特别是页面里有太多这个效果,而最...

jquery控制css绝对定位位置效果,例如鼠标移动到图标显示层显示相关信息

$(获取到需要弹出浮动框的元素obj).hover(function () { //鼠标移动时 //获取到需要弹出浮动框的元素obj ...

打开一个层后可以拖动

[easyui]datagrid鼠标移动显示单元格内容

当单元格内容过长无法完全显示怎么办?如果鼠标移动到该单元格可以自动显示出所有文字内容就好啦。 这里提供两个思路 给对应节点添加一个title属性,值就是节点的内容 添加事件,移动到单元格就用一个to...

jQuery实现网易相册鼠标移动显示隐藏效果

其实主要是jquery 层选择器的应用,jquery 高手可以跳过。。。   网易相册效果图如下:当鼠标移动经过照片就显示“设为封面|删除”,移开后就隐藏,此效果在web开发中经常会用到。故总结一...
  • kang89
  • kang89
  • 2012-01-05 00:44
  • 1856

鼠标悬浮到表格的单元格上,将弹出一个框,框中显示这个单元格的内容。框失去焦点,框也消失。利用jQuery+javascript写的。

aaaaaaaaaa bbbbbbbbbbbbbbbbbbbbbbb cccccccccc ddddddddd 代码如下 $(function()...

JQuery_鼠标移动到图标上显示相应信息

body { margin: 0px; } #div1 { margin: 0 auto...

jquery 随鼠标移动的导航条

新学的炫酷特效,分享下,源代码如下: 首页 * { padding: 0; ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)