<html>

<head>

    <script src="jquery-1.9.1.min.js" type="text/javascript"></script>

    <script>

        $(document).ready(function() {

            $("a").each(function() {

                $(this).mouseover(function() {

                    $(this).next("div").css("left", function() {

                        return $(this).prev("a").offset().left - $(this).width();

                    });

                    $(this).next("div").css("top", function() {

                        return $(this).prev("a").offset().top;

                    })

                    var str = "";

                    str += "<div style='color:red;'><ul style='width:100%; margin-left:0;'><li style='float:left; width:50%;'>11</li><li style='float:left; width:30%;'>33</li><li style='float:left; width:15%;'>55</li></ul></div/>";

                    str += "<div style='color:blue;'><ul style='width:100%; margin-left:0;'><li style='float:left; width:50%;'>22</li><li style='float:left; width:30%;'>44</li><li style='float:left; width:15%;'>66</li></ul></div/>";

                    $("a").each(function() {

                        $(this).next("div").html(str);

                    });

                    $(this).next("div").toggle();

                });

                $(this).mouseout(function() {

                    var id = $(this).prev("input[type='hidden']").prev("input[type='hidden']").val();

                    $(this).next("div").toggle();

                });

            });

        });

    </script>

</head>

<body>

<div>

    <div style="width:900px;float:left;">

        test tooltip

    </div>

    <div style="float:left;">

        <table>

            <tr><td>

                <a></a>

                <div style="position: absolute; top: 200; left: 300; display: none; width: 560; height: auto;

                    background-color: yellow; color: Black; border: solid  black  1px;" id="floatDIV">

                </div>

            </td></tr>

            <tr><td>

                <a></a>

                <div style="position: absolute; top: 200; left: 300; display: none; width: 560; height: auto;

                    background-color: yellow; color: Black; border: solid  black  1px;" id="floatDIV">

                </div>

            </td></tr>

        </table>

    </div>

</div>

</body>

</html>

简单文本悬浮div提示效果的更多相关文章

  1. 超简单的js实现提示效果弹出以及延迟隐藏的功能

     自动登录勾选提示效果 要求:鼠标移入显示提示信息框:鼠标离开,信息框消失,消失的效果延迟 <!DOCTYPE html> <html lang="en"> ...

  2. JQuery实现一个简单的鼠标跟随提示效果

    效果体验:http://hovertree.com/texiao/jsstudy/2/ 实现思路 1 鼠标移入标题(这里是<a>标签) 创建一个div,div的内容为鼠标位置的文本 将创建 ...

  3. 简单jquery 鼠标悬停提示效果

    记得自己引入jq插件哦~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

  4. [转]让你的网页文本框增加光晕效果与提示，水印(类似QQ2011)

    本文转自:http://www.cnblogs.com/xiaofengfeng/archive/2013/01/28/2880344.html 让你的网页文本框增加光晕效果(类似QQ2011) 我们 ...

  5. jQuery打造用户注册时获取焦点文本框出现提示jquery表单特效

    jQuery打造用户注册时获取焦点文本框出现提示效果的jquery表单特效 当获取焦点时,会分别的弹出相应的信息提示框,失去焦点就会隐藏提示信息. 效果兼容性很高,适用浏览器:IE6.IE7.IE8. ...

  6. js简单实现删除记录时的提示效果

    删除记录时的提示效果,挺人性化的,实现的方法有很多,在本文为大家介绍下使用js是如何实现的 样式 复制代码代码如下: <style type="text/css">  ...

  7. css实现鼠标悬浮后的提示效果

    一.概述 很多时候网站中需要在鼠标划过小图标时,悬浮出提示性的文字.比如下图: 鼠标悬浮后的效果 这种效果可以使用css中的伪类hover来实现.但有时候搞不清两个元素的嵌套关系.使用了hover却没 ...

  8. jQuery实现网页右下角悬浮层提示

    最近有同事提到类似网页右下角的消息悬浮提示框的制作.我之前也做过一个类似的例子,很简单.是仿QQ消息.现在感觉之前的那个例子只是说了实现原理,整体上给你的感觉还是太丑,今天为大家带来一个新的例子.是D ...

  9. BootStrap入门教程 (四) ：JQuery类库插件（模态窗口，滚动监控，标签效果，提示效果，“泡芙”效果，警告区域，折叠效果，旋转木马，输入提示）

    上讲回顾:Bootstrap组件丰富同时具有良好可扩展性,能够很好地应用在生产环境.这些组件包括按钮(Button),导航(Navigation),缩略图( thumbnails),提醒(Alert) ...

随机推荐

  1. DirectX11 With Windows SDK--10 摄像机类

    前言 DirectX11 With Windows SDK完整目录:http://www.cnblogs.com/X-Jun/p/9028764.html 由于考虑后续的项目需要有一个比较好的演示环境 ...

  2. Charles(V3.10.1)的抓包以及常见功能的使用

    一.Charles的安装 安装都不会,那就不用再往下看了.(*^__^*) 嘻嘻…… 二.HTTP抓包 1.查看电脑IP地址 2.设置手机的HTTP代理 手机连接到同一WiFi下设置HTTP代理: 服 ...

  3. Neutron vxlan network--L2 Population

    L2 Population 是用来提高 VXLAN 网络 Scalability 的.   通常我们说某个系统的 Scalability 好,其意思是: 当系统的规模变大时,仍然能够高效地工作. L2 ...

  4. [references] How to Do Research

    目录: ** 0x01 做研究/写论文的Alpha/Beta ** 0x02 How to Do Research | 经典指南 ** 0x03 思考写作与研究的区别 | The difference ...

  5. [转帖]EXPDP dumpfile和parallel的关系

    http://blog.itpub.net/28602568/viewspace-2133375/ 转帖 EXPDP 里面 parallel 与 dumpfile 里面的文件数的关系. 但是我这里有一 ...

  6. [转帖]Qemu 简述

    Qemu 简述 记得KVM 就是 底层用的qemu https://www.cnblogs.com/bakari/p/7858029.html 本文首发于我的公众号 Linux云计算网络(id: cl ...

  7. Python进阶6---序列化与反序列化

    序列化与反序列化*** 为什么要序列化 ? 定义 pickle库 #序列化实例 import pickle lst = 'a b c'.split() with open('test.txt','wb ...

  8. 一次单体测试的采坑--MatcherAssert.assertThat---org.hamcrest 和org.mockito

    单体测试测试环境ci上报这个错, 本地没问题. org.hamcrest.Matcher.describeMismatch(Ljava/lang/Object;Lorg/hamcrest/Descri ...

  9. 4月18日 MySQL学习

    正式开始了数据库的学习 昨天下好的MySQL 今天正式开始学习的,介绍了多种数据库软件,当然 学习的这个是开源的 免费的. DBMS(数据库管理系统)这就是我们学习的数据库的软件 数据库分为关系型数据 ...

  10. oracle密码过期

    1.使用sys,以sysdba登录. sqlplus /nolog conn sys/123456 as sysdba 2.将密码有效期由默认的180天修改成“无限制”,修改之后不需要重启动数据库,会 ...