当光标移动到某些元素上时，会弹出像tips的提示框，这种效果想必大家都有见到过吧，下面有个不错的示例，大家可以感受下

当光标移动到某些元素上时，会弹出像tips的提示框。

复制代码代码如下:
<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>jQuery动态提示消息框效果--www.jbxue.com</title><base target="_blank" /> 
<style type="text/css"> 
* { font-family: monaco; } 
div.item_keleyi_com { width:100px; height:50px; background-color: maroon; text-align:center; padding-top:25px; } 
div#item_keleyi_com_1 { position: absolute; top: 50px; left: 50px;color: white; } 
div#item_keleyi_com_2 { position: absolute; top: 500px; left: 0px;color: white; } 
div#item_keleyi_com_3 { position: absolute; top: 0px; left: 500px;color: white; } 
div#item_keleyi_com_4 { position: absolute; top: 500px; left: 500px; color: white;} 
ul{ list-style:none;padding:0px 0px 0px 10px;}a{color:Blue;} 
</style> 
<link rel="stylesheet" href="http://keleyi.com/keleyi/phtml/jqtexiao/2/stylesheets/jquery.tooltip/jquery.tooltip.css" type="text/css" /> 
<script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquery/jquery-1.10.2.min.js"></script> 
<script type="text/javascript" src="http://keleyi.com/keleyi/phtml/jqtexiao/2/javascripts/jquery.tooltip.js"></script> 
<script type="text/javascript"> 
$j = jQuery.noConflict(); 
$j(document).ready(function(){ 
$j("div.item_kel"+"eyi_com").tooltip(); 
}); 
</script> 
</head>

<body> 
<div id="item_keleyi_com_1" class="item_keleyi_com"> 
柯乐义 
<div class="tooltip_description" style="display:none" title="柯乐义详细信息"> 
本网站的名称：柯乐义<br /> 
本网站的网址： keleyi.com <br /> 
本站提供jQuery特效,Javascript实例，ASP.NET源码等内容资料，欢迎访问！柯 乐 义 
<br />工具：http://tool.keleyi.com 
<br />搜索本站内容：http://so.keleyi.com 
</div> 
</div>

<div id="item_keleyi_com_2" class="item_keleyi_com"> 
jQuery 
<div class="tooltip_description" style="display:none" title="jQuery介绍"> 
网址：http://jbxue.com/menu/jquery/ 
<br />脚本学堂网上有许多jQuery的特效和知识，欢迎访问。 
jQuery实现脚本与页面的分离<br /> 
节省开发者学习时间<br /> 
让JavaScript编程变得有趣<br /><br /><br /> 
更多信息请访问：http://so.keleyi.com/ <br /> 
搜索：jQuery的优势与不足 
</div> 
</div>

<div id="item_keleyi_com_3" class="item_keleyi_com"> 
HTML5 
<div class="tooltip_description" style="display:none" title="HTML5介绍"> 
HTML5的发展越来越迈向成熟，很多的应用已经逐渐出现在你我日常生活中了，不只让传统网站上的互动Flash逐渐的被HTML5的技术取代，更重要的是可以透过HTML5的技术来开发跨平台的手机软件，让许多开发者感到十分兴奋！<br /> 
一般广义而言的HTML5则包含了HTML、CSS和JavaScript三个部分，不单单只是HTML部分而已，CSS 3和JavaScript也有许多的创新，让整个网页程序功能更加缤纷。<br /> 
keleyi.com 
</div> 
</div>

<div id="item_keleyi_com_4" class="item_keleyi_com"> 
Javascript 
<div class="tooltip_description" style="display:none" title="Javascript介绍"> 
在javascript中，变量的作用域有全局（window对象）作用域和函数调用作用域。<br /> 
js获取本机的外网/广域网ip地址<br /><br /><br /> 
更多信息请访问：http://so.keleyi.com/ <br /> 
搜索：Javascript作用域<br /> 
js获取本机的外网/广域网ip地址<br />

</div> 
</div> 
<div style="clear:both;margin-top:130px;width:960px;"> 
<h3>jQuery动态提示消息框效果</h3> 
<p>请把光标移动到四个矩形上。适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. <br />来源：<a href="http://jbxue.com/">脚本学堂</a> <a href="http://jbxue.com/a/bjac/hxv86dyi.htm">原文</a></p> 
<ul> 
<li><a href="http://jbxue.com/a/bjac/kjsrt3b0.htm">jQuery AJAX</a></li> 
<li><a href="http://jbxue.com/a/bjac/182di68b.htm">导航样式</a></li> 
<li><a href="http://jbxue.com/a/bjac/mt97p5y9.htm">侧边导航</a></li> 
<li><a href="http://jbxue.com/dev/3068696139522ae4.htm">树形菜单</a></li> 
<li><a href="http://jbxue.com/a/bjac/ck9atu5j.htm">jquery ui 可折叠手风琴菜单</a></li><li><a href="http://jbxue.com/a/bjac/r55i6646.htm">jQuery :even 偶数选择器</a></li><li><a href="http://jbxue.com/a/bjac/9rf4gedp.htm">展开、收起div的jQuery代码</a></li><li><a href="http://jbxue.com/a/bjac/mnmpm4bv.htm">jQuery图片走马灯示例</a></li> 
</ul> 
</div> 
</body> 
</html> 

jQuery实现鼠标移到元素上动态提示消息框效果的更多相关文章

  1. jQuery动态提示消息框效果

    效果预览:http://keleyi.com/keleyi/phtml/jqtexiao/2.htm 原文:http://keleyi.com/a/bjac/hxv86dyi.htm <!DOC ...

  2. WPF中当鼠标移到按钮上时，按钮的背景图片消失的问题

    如果给按钮设置了背景图片,当鼠标移到按钮上的时候,按钮就好变成一个浅蓝色的按钮,背景图片就消失了,对于这个问题有很多解决方法,我只分享一下我的解决方法. 我第一次用的方式是在按钮中添加一个图片,不用背 ...

  3. JS事件 鼠标经过事件（onmouseover）鼠标经过事件，当鼠标移到一个对象上时，该对象就触发onmouseover事件，并执行onmouseover事件调用的程序。

    鼠标经过事件(onmouseover) 鼠标经过事件,当鼠标移到一个对象上时,该对象就触发onmouseover事件,并执行onmouseover事件调用的程序. 现实鼠标经过"确定&quo ...

  4. （转载）VC/MFC 工具栏上动态添加组合框等控件的方法

    引言 工具条作为大多数标准的Windows应用程序的 一个重要组成部分,使其成为促进人机界面友好的一个重要工具.通过工具条极大方便了用户对程序的操作,但是在由Microsoft Visual C++开 ...

  5. VC/MFC 工具栏上动态添加组合框等控件的方法

    引言 工具条作为大多数标准的Windows应用程序的一个重要组成部分,使其成为促进人机界面友好的一个重要工具.通过工具条极大方便了用户对程序的操作,但是在由Microsoft Visual C++开发 ...

  6. 2.7.1 元素定位：selenium消息框处理 （alert、confirm、prompt）

    来源:http://blog.csdn.net/cui_angel/article/details/7784211        http://www.cnblogs.com/tobecrazy/p/ ...

  7. jQuery实现鼠标移上弹出提示框，移出消失

    <TD>里有一行数据 "那片笑声让我想起......"  假设超出规定长度将用......代替, 而现在要通过鼠标移动到......上 显示全部内容,移出则消失.如下图 ...

  8. JS/jquery实现鼠标控制页面元素显隐

    最近网站要上一个活动广告横幅,当用户鼠标划过时显隐二维码.像这种鼠标事件控制页面元素显隐的情况,码农们会经常遇到,可以通过javascript或jquery代码实现,下面就几种常见需求一起归纳一下. ...

  9. Jquery实现鼠标移到某个对象，弹出显示层。

    /** * 鼠标移上去显示层 * @param divId 显示的层ID * @returns */ $.fn.myHoverTip = function(divId) { var div = $(& ...

随机推荐

  1. Ubuntu下安装Nginx,PHP5(及PHP-FPM),MySQL

    .简介: Tomcat在高并发环境下处理动态请求时性能很低,而在处理静态页面更加脆弱.虽然Tomcat的最新版本支持epoll,但是通过Nginx来处理静态页面要比通过Tomcat处理在性能方面好很多 ...

  2. leetcode第一刷_Jump Game

    这个题事实上非常easy的,我一開始想复杂了,它没要求记录路径,事实上仅仅要看一下每一步之后所能延伸到的最远的位置就能够了,在这一个最远位置前面的那些位置,都是能够到达的,假设扫到了某个i,它大于当前 ...

  3. 几种sap增强的查找方法

    ***方法一**************************************** 通过SE30,运行TCODE后,点Evaluate后,查看运行时间分析评估:命中清单. 找以“exit”开 ...

  4. JavaScript网站设计实践（一）网站结构以及页面效果设计

    这是JavaScript DOM编程艺术里的构建JavaScript网站设计的例子,这本书给我学习JavaScript带来许多启发,在这个乐队宣传网站中,把前面学到的知识点整合在这个项目了.在这里记录 ...

  5. Android实现资料收藏

    1,调web浏览器 Uri myBlogUri = Uri.parse("http://xxxxx.com"); returnIt = new Intent(Intent.ACTI ...

  6. CSS3 旋转的八卦图

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. iOS 中使用.9图

    背景 .9图来源于Android.为了设计出一套图,兼容Android和iOS,使用.9图的方式来对图片进行拉伸以适应不同的屏幕.在iOS中没有.9图的概念,只能先了解Android的.9图再进行模拟 ...

  8. HTML5表单内元素的required属性

    当表单内元素(如input.textarea)中有required属性并且值不为false的时候,则该字段不能为空,否则提交失败. <input type="text" au ...

  9. CentOS7安装和配置FTP

    1. 安装vsftpd #安装vsftpd yum install -y vsftpd #设置开机启动 systemctl enable vsftpd.service # 重启 service vsf ...

  10. SpriteFrameCache 精灵帧缓存

    //获取精灵帧缓存的单例对象 auto  spriteFrameCache = SpriteFrameCache::getInstance(); //从plist文件添加多个精灵帧 spriteFra ...