<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. 我的第一个python web开发框架（38）——管理员管理功能

    后台管理员的管理功能,它主要用来管理后台的登录账号,绑定权限,当然如果想将后台管理扩展成企业相关管理系统,比如用于公司人事管理,在这个基础上进行适当扩展就可以了. 我们先看看界面效果(也可以看着数据字 ...

  2. Linux：Day20(上) openssh和CA

    ssh:secure shell protocol,22/tcp,安全的远程登陆 OpenSSH:ssh协议的开源实现: dripbear:另一个开源实现: SSH协议版本 v1:基于CRC-32做M ...

  3. SequoiaDB 巨杉数据库

    传统单点数据库的容量瓶颈,仅仅是分布式数据库所解决的问题之一.更重要的是在未来微服务化应用开发以及云化平台的趋势下,应用不再以“烟囱式”的中间件加数据库模式进行构建,而是采用数千甚至上万的微服务程序构 ...

  4. Ceva定理的四种证明方法

    ${\color{Teal} {Ceva定理}}$设$D.E.F$依次为三角形ABC的边$AB.BC.CA$的内点,记 $λ$=(A,B,D),$μ$=(B,C,E),$v$=(C,A,F) 求证:三 ...

  5. JAVA的三个版本，JSE,JEE,JME三者之间的区别

    JAVA是一种面向对象语言由SUN公司出品 J针对不同的使用方向规划出JSE,JEE,JME三个版本 1.JSE 指标准版一般用于用户学习JAVA语言的基础也是使用其他两个版本的基础主要用于编写C/S ...

  6. Python selenium —— 一定要会用selenium的等待，三种等待方式解读

    发现太多人不会用等待了,博主今天实在是忍不住要给大家讲讲等待的必要性. 很多人在群里问,这个下拉框定位不到.那个弹出框定位不到…各种定位不到,其实大多数情况下就是两种问题:1 有frame,2 没有加 ...

  7. Java Web的简单项目部署

    目录 项目介绍 安装并配置jdk和tomcat 安装并配置mysql 使用Eclipse导出war包 部署war包到服务器 导出项目的数据库 将项目的数据库导入服务器的数据库中 修改配置 重启Tomc ...

  8. bzoj4785:[ZJOI2017]树状数组:二维线段树

    分析: "如果你对树状数组比较熟悉,不难发现可怜求的是后缀和" 设数列为\(A\),那么可怜求的就是\(A_{l-1}\)到\(A_{r-1}\)的和(即\(l-1\)的后缀减\( ...

  9. MySQL 的数据目录

    MySQL里面有4个数据库是属于MySQL自带的系统数据库: mysql 这个数据库贼核心,它存储了MySQL的用户账户和权限信息,一些存储过程.事件的定义信息,一些运行过程中产生的日志信息,一些帮助 ...

  10. 015模块——起别名

    1.import起别名:通过as关键字可以给模块起别名: 模块名一旦起别名,原模块名就不能再使用 2.起别名的作用:①可以简化模块名字 import mmmmmmmmmmm3 as my_m3 pri ...