<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. WPF 控件之 Popup

    1.经常使用属性说明 IsOpen: 布尔值,指示 Popup 控件是否显示 StaysOpen: 布尔值,指示在 Popup 控件失去焦点的时候,是否关闭 Popup 控件的显示 PopupAnim ...

  2. Codeforces Round #539 (Div. 2) - C. Sasha and a Bit of Relax(思维题)

    Problem   Codeforces Round #539 (Div. 2) - C. Sasha and a Bit of Relax Time Limit: 2000 mSec Problem ...

  3. Linux基础学习:文件与目录管理

    目录与路径 目录的相关操作 几个特殊的目录: . :表示当前目录 .. :表示上一层目录 - :表示前一个工作目录 ~ :表示当前用户所在的主文件夹 ~account :表示account用户所在的主 ...

  4. ZJOI2019一轮停课刷题记录

    Preface 菜鸡HL终于狗来了他的省选停课,这次的时间很长,暂定停到一试结束,不过有机会二试的话还是可以搞到4月了 这段时间的学习就变得量大而且杂了,一般以刷薄弱的知识点和补一些新的奇怪技巧为主. ...

  5. WiFi攻击中“核武器”

    3·15晚会上,央视曝光了WiFi探针盒子通过手机MAC地址.大数据匹配获取手机用户个人信息的典型案例. 其中,曝光的“声牙科技有限公司”号称有全国6亿手机用户的个人信息,包括手机号,只要将获取到的手 ...

  6. Python----Kernel SVM

    什么是kernel Kernel的其实就是将向量feature转换与点积运算合并后的运算,如下, 概念上很简单,但是并不是所有的feature转换函数都有kernel的特性. 常见kernel 常见k ...

  7. A Base Class pointer can point to a derived class object. Why is the vice-versa not true?

    问题转载自:https://stackoverflow.com/questions/4937180/a-base-class-pointer-can-point-to-a-derived-class- ...

  8. Consecutive Sum LightOJ - 1269(区间异或和)

    Consecutive Sum 又来水一发blog... 本来是昨天补codechef的题,最后一道题是可持久化字典树,然后去黄学长博客看了看 觉得字典树写法有点不太一样,就想着用黄学长的板子写码几道 ...

  9. python一(字符串,字典)

    list操作 name = ['小王','小米','小张','王强','张三','李四'] name.append('黄霑')#添加元素在最后一个 name.insert(,'王五')#指定下标插入元 ...

  10. 微信小程序之初探(常见语法 VS vue)常见问题(点击不生效,数据绑定)

    最近在调研微信小程序开发,对于一个前端小白来说,在各种框架都还用不熟的情况下,再来开发小程序确实还是不容易. 小程序出来之初,听过演讲,看过一点点儿视频,感觉和angular语法有点相似(PS:那是也 ...