<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. 好程序员web前端分享如何理解JS的单线程

    好程序员web前端分享如何理解JS单线程,JS本质是单线程的.也就是说,它并不能像JAVA语言那样,两个线程并发执行. 但我们平时看到的JS,分明是可以同时运作很多任务的,这又是怎么回事呢? 首先,J ...

  2. React 精要面试题讲解(五) 高阶组件真解

    说明与目录 在学习本章内容之前,最好是具备react中'插槽(children)'及'组合与继承' 这两点的知识积累. 详情请参照React 精要面试题讲解(四) 组合与继承不得不说的秘密. 哦不好意 ...

  3. 创建pandas和sqlalchemy的j交互对象，方便于日常的数据库的增删改查(原创)

    #导入第三方库sqlalchemy的数据库引擎 from sqlalchemy import create_engine #导入科学计算库 import pandas as pd #导入绘图库 imp ...

  4. day13（函数嵌套定义，global，nonlocal关键字，闭包，装饰器）

    一,复习 ''' 1.函数对象:函数名 => 存放的是函数的内存地址 1)函数名 - 找到的是函数的内存地址 2)函数名() - 调用函数 => 函数的返回值 eg:fn()() => ...

  5. C语言之将弧度值转换为角度值

    #include<stdio.h> #include<stdlib.h> #define pi 3.141592 void conver_radian(float radian ...

  6. ubuntu下安装mongodb

    https://www.cnblogs.com/shileima/p/7823434.html

  7. springboot 配置文件

    – Spring Boot使用一个全局的配置文件 • application.properties • application.yml – 配置文件放在src/main/resources目录或者类路 ...

  8. Spring Boot – Jetty配置

    前言 默认情况下,Spring Boot会使用内置的tomcat容器去运行应用程序,但偶尔我们也会考虑使用Jetty去替代Tomcat:对于Tomcat和Jetty,Spring Boot分别提供了对 ...

  9. Ubutun 16.04添加操作命令审计

    1.启用/var/log/messages,监控系统命令 说明:由于需要把操作命令记录到/var/log/messages,但是ubuntu默认并没有开启日志写入到这个文件 tchua@ubuntu: ...

  10. centos7之zabbix的监控H3C ER3200G2流量

    1.首先在服务器端安装snmp工具 yum -y install net-snmp-utils snmp-libs snmp-devel snmp 启动snmpd服务 systemctl start ...