<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. 记录Nginx实现内容重定向的两种方式：rewrite和反向代理

    第一种:rewrite server { listen                80; server_name   www.test.org; root                  /te ...

  2. linux系统ubuntu18.04安装mysql（5.7）

    本文是参考mysql官网整理而成,顺便把一些遇到的问题记载下来. ①将MySQLAPT存储库添加到系统的软件存储库列表中  ---->下载APT存储库(下载链接)  ---->安装APT存 ...

  3. 【spring源码分析】IOC容器初始化（十一）

    前言:前面分析了doCreateBean中的createBeanInstance函数,接下来分析其剩余流程. 首先贴上doCreateBean函数: // AbstractAutowireCapabl ...

  4. Linux新手随手笔记1.3

    shell脚本的编写(划重点) #!/bin/bash                    脚本的声明信息 #sjsjdhsjdhh                  脚本的注释 ls -l    ...

  5. linux环境下vim创建java文件，并编译运行

    一.前提 安装Java 二.创建工作目录并编辑java文件 三.编译 四.运行

  6. Docker 核心技术之Docker Compose

    Docker Compose 简介 Docker Compose是什么? Docker Compose是一个能一次性定义和管理多个Docker容器的工具. 详细地说: Compose中定义和启动的每一 ...

  7. 分布式唯一ID生成方案是什么样的？（转）

    一.前言 分布式系统中我们会对一些数据量大的业务进行分拆,如:用户表,订单表.因为数据量巨大一张表无法承接,就会对其进行分库分表. 但一旦涉及到分库分表,就会引申出分布式系统中唯一主键ID的生成问题, ...

  8. 空数组判断false、true的情况

  9. django xadmin(1)

    filter_horizontal 从‘多选框’的形式改变为‘过滤器’的方式,水平排列过滤器,必须是一个 ManyToManyField类型,且不能用于 ForeignKey字段,默认地,管理工具使用 ...

  10. Codeforces1153F Serval and Bonus Problem 【组合数】

    题目分析: 我们思考正好被k个区间覆盖的情况,那么当前这个子段是不是把所有的点分成了两个部分,那么在两个部分之间相互连k条线,再对于剩下的分别连线就很好了?这个东西不难用组合数写出来. 然后我们要证明 ...