<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. 【java学习】实践中总结--持续更新中

    目录: 一些定义 配置环境 相关语法 1.一些定义 java中DO的含义: https://blog.csdn.net/canot/article/details/51698047 DAO 中包含了各 ...

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

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

  3. Java Web Token - JWT

    JWT认证过程:https://www.codetd.com/article/3602378 JWT官方文档:https://jwt.io/introduction/

  4. c# 上传图片到一个外链相册服务器

    这里一个免费上传图片的网站:https://imgbb.com 代码: private void post1(string filePath) { try { string fName = new F ...

  5. 【故障公告】SendCloud 邮件发送服务故障造成大量 QQ 邮箱收不到邮件

    抱歉,由于我们所使用的搜狐旗下的 SendCloud 邮件发送服务出现故障,今天上午大量发往 @qq.com 邮箱的邮件无法正常发送,从 SendCloud 管理控制台看这些邮件一直处于“请求中”的状 ...

  6. MVC设计思想

    MVC就是按照程序的功能将他们分成三个层,Model层(模型层),View层(显示层),Controller(控制层). Model层:可以细分为两层,分别是dao层.service层,这两层主要功能 ...

  7. 启用k8s metrics server监控

    1.创建aggregator证书 方法一:直接使用二进制源码包安装 $ wget https://pkg.cfssl.org/R1.2/cfssl_linux-amd64 $ chmod +x cfs ...

  8. Python中的 sort 和 sorted

    今天在做一道题时,因为忘了Python中sort和sorted的用法与区别导致程序一直报错,找了好久才知道是使用方法错误的问题!现在就大致的归纳一下sort和sorted的用法与区别 1. sort: ...

  9. 详解TCP三次握手

    该文pdf下载地址:三次握手.pdf

  10. jsonp 实现前端跨域

    1.基于ajax 发起jsonp 请求. 前端代码: let url = 'http://localhost:8001/'; $.ajax({ type: 'get', dataType: 'json ...