jQuery实现鼠标移到元素上动态提示消息框效果
当光标移动到某些元素上时,会弹出像tips的提示框,这种效果想必大家都有见到过吧,下面有个不错的示例,大家可以感受下
<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实现鼠标移到元素上动态提示消息框效果的更多相关文章
- jQuery动态提示消息框效果
效果预览:http://keleyi.com/keleyi/phtml/jqtexiao/2.htm 原文:http://keleyi.com/a/bjac/hxv86dyi.htm <!DOC ...
- WPF中当鼠标移到按钮上时,按钮的背景图片消失的问题
如果给按钮设置了背景图片,当鼠标移到按钮上的时候,按钮就好变成一个浅蓝色的按钮,背景图片就消失了,对于这个问题有很多解决方法,我只分享一下我的解决方法. 我第一次用的方式是在按钮中添加一个图片,不用背 ...
- JS事件 鼠标经过事件(onmouseover)鼠标经过事件,当鼠标移到一个对象上时,该对象就触发onmouseover事件,并执行onmouseover事件调用的程序。
鼠标经过事件(onmouseover) 鼠标经过事件,当鼠标移到一个对象上时,该对象就触发onmouseover事件,并执行onmouseover事件调用的程序. 现实鼠标经过"确定&quo ...
- (转载)VC/MFC 工具栏上动态添加组合框等控件的方法
引言 工具条作为大多数标准的Windows应用程序的 一个重要组成部分,使其成为促进人机界面友好的一个重要工具.通过工具条极大方便了用户对程序的操作,但是在由Microsoft Visual C++开 ...
- VC/MFC 工具栏上动态添加组合框等控件的方法
引言 工具条作为大多数标准的Windows应用程序的一个重要组成部分,使其成为促进人机界面友好的一个重要工具.通过工具条极大方便了用户对程序的操作,但是在由Microsoft Visual C++开发 ...
- 2.7.1 元素定位:selenium消息框处理 (alert、confirm、prompt)
来源:http://blog.csdn.net/cui_angel/article/details/7784211 http://www.cnblogs.com/tobecrazy/p/ ...
- jQuery实现鼠标移上弹出提示框,移出消失
<TD>里有一行数据 "那片笑声让我想起......" 假设超出规定长度将用......代替, 而现在要通过鼠标移动到......上 显示全部内容,移出则消失.如下图 ...
- JS/jquery实现鼠标控制页面元素显隐
最近网站要上一个活动广告横幅,当用户鼠标划过时显隐二维码.像这种鼠标事件控制页面元素显隐的情况,码农们会经常遇到,可以通过javascript或jquery代码实现,下面就几种常见需求一起归纳一下. ...
- Jquery实现鼠标移到某个对象,弹出显示层。
/** * 鼠标移上去显示层 * @param divId 显示的层ID * @returns */ $.fn.myHoverTip = function(divId) { var div = $(& ...
随机推荐
- jquery处理单击和双击事件
今天做div点击时,需要用到同一div的单击和双击事件,出现问题如下 例子: Html <body> <div id="div_1">单击双击我</d ...
- 在artTemplate的标签中使用外部函数的方法
第一步,声明函数,并将函数作为data对象的属性.例如: var resArray = new Array(); function beforeRender(data) { //addToArray为 ...
- LINUX系统备份
LINUX系统备份 =========================================================== 作者: gswwgph(http://gswwgph.itp ...
- 从你的u盘启动:30天自制操作系统第四天u盘启动学习笔记
暑假学习小日本的那本书:30天自制操作系统 qq交流群:122358078 ,更多学习中的问题.资料,群里分享 developing environment:ubuntu 关于u盘启动自己做的操 ...
- C# 之 OpenFileDialog的使用
一.打开文件对话框(OpenFileDialog) 1. OpenFileDialog控件有以下基本属性 [1]InitialDirectory:对话框的初始目录 [2]Filter:要在对话框中显示 ...
- oracle数据库管理员简介、导入数据与导出数据
数据库管理员: sys和system的权限区别:sys:所有oracle的数据字典的基表和视图都存放在sys用户中,这些基表和视图对于oracle的运行时至关重要的,由数据库 自己维护,任何用户都不能 ...
- Linux清空内存缓存
> /proc/sys/vm/drop_caches
- selendroid项目实战2--ruby下的TOAST定位
网上很多 python/java捕获toast的方法,但ruby的简直没见过. selendroid客户端是基于selenium,而不一定需要appium,所以很多selenium的方法可以直接使用, ...
- margin,padding之我见
在网页布局中,margin和padding绝对会占很重要的作用,但是在实际的项目中,很多新手前端程序员们往往不能正确的使用它们,导致会出现一些不必要的麻烦,下面是我在前几天的项目中遇到的一些问题,以及 ...
- 基于spark实现表的join操作
1. 自连接 假设存在如下文件: [root@bluejoe0 ~]# cat categories.csv 1,生活用品,0 2,数码用品,1 3,手机,2 4,华为Mate7,3 每一行的格式为: ...