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

React+AntD+AntV 前端实例 鼠标移动事件 触发显示 浮动DIV图层(展现一个趋势图)

最近在做性能平台的前端,PRD有个需求:当鼠标移到table中某列的数据上,要显示该数据近期一段时间内的趋势图,鼠标移开,趋势图浮动层消失,最终实现效果如图(图中数据是mock数据):1.组件是用的A...

jquery鼠标悬停图片放大滑动显示标题

jquery鼠标悬停图片放大滑动显示标题,在一些网站的图文列表页很常见的效果...

打开一个层后可以拖动

  • 2009年07月07日 13:33
  • 2KB
  • 下载

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

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

C#中,当鼠标移动到控件上,动态显示提示内容 -> 用代码操作ToolTip

【背景】 写了个C#的小程序,其中在Settings窗体中有些配置参数,希望在鼠标移动到对应的配置选项上,动态显示相关的说明解释内容。 【解决过程】 1.原先就已经知道,有些控件,是带ToolT...

自己写的基于JavaScript DOM 仿一些页面的鼠标移动显示相应区块内容

无标题文档 * { margin: 0; padding: 0; } #wrap { text-align: center; } #test1 { position: relative; ...
  • ios0213
  • ios0213
  • 2016年05月29日 00:54
  • 634
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Jquery创建一个层显示标题的内容且随鼠标移动
举报原因:
原因补充:

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