jQuery实现鼠标移到元素上动态提示消息框效果


Posted in Javascript onOctober 20, 2013

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

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>jQuery动态提示消息框效果</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://keleyi.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://keleyi.com/">柯乐义</a> <a href="http://keleyi.com/a/bjac/hxv86dyi.htm">原文</a></p> 
<ul> 
<li><a href="http://keleyi.com/a/bjac/kjsrt3b0.htm">jQuery AJAX</a></li> 
<li><a href="http://keleyi.com/a/bjac/182di68b.htm">导航样式</a></li> 
<li><a href="http://keleyi.com/a/bjac/mt97p5y9.htm">侧边导航</a></li> 
<li><a href="http://keleyi.com/dev/3068696139522ae4.htm">树形菜单</a></li> 
<li><a href="http://keleyi.com/a/bjac/ck9atu5j.htm">jquery ui 可折叠手风琴菜单</a></li><li><a href="http://keleyi.com/a/bjac/r55i6646.htm">jQuery :even 偶数选择器</a></li><li><a href="http://keleyi.com/a/bjac/9rf4gedp.htm">展开、收起div的jQuery代码</a></li><li><a href="http://keleyi.com/a/bjac/mnmpm4bv.htm">jQuery图片走马灯示例</a></li> 
</ul> 
</div> 
</body> 
</html>
Javascript 相关文章推荐
jquery控制listbox中项的移动并排序
Nov 12 Javascript
各情景下元素宽高的获取实现代码
Sep 13 Javascript
基于Jquery代码实现手风琴菜单
Nov 19 Javascript
通过BootStrap实现轮播图的实际应用
Sep 26 Javascript
jQuery中的100个技巧汇总
Dec 15 Javascript
ES6新特性:使用export和import实现模块化详解
Jul 31 Javascript
jQuery实现基本动画效果的方法详解
Sep 06 jQuery
详细教你微信公众号正文页SVG交互开发技巧
Jul 25 Javascript
Node.js在图片模板上生成二维码图片并附带底部文字说明实现详解
Aug 07 Javascript
Node.js API详解之 timer模块用法实例分析
May 07 Javascript
ES6 Generator基本使用方法示例
Jun 06 Javascript
JS实现手风琴特效
Nov 08 Javascript
图片动画横条广告带上下滚动可自定义图片、链接等等
Oct 20 #Javascript
jQuery 属性选择器element[herf*='value']使用示例
Oct 20 #Javascript
js数组的基本用法及数组根据下标(数值或字符)移除元素
Oct 20 #Javascript
浏览器的JavaScript引擎的识别方法
Oct 20 #Javascript
JS实现点击图片在当前页面放大并可关闭的漂亮效果
Oct 18 #Javascript
jquery 循环显示div的示例代码
Oct 18 #Javascript
使用CSS和jQuery模拟select并附提交后取得数据的代码
Oct 18 #Javascript
You might like
php创建多级目录代码
2008/06/05 PHP
php intval的测试代码发现问题
2008/07/27 PHP
PHP 导出数据到淘宝助手CSV的方法分享
2010/02/27 PHP
php在页面中调用fckeditor编辑器的方法
2011/06/10 PHP
php创建基本身份认证站点的方法详解
2013/06/08 PHP
PHP封装函数实现生成随机的字符串验证码
2017/01/24 PHP
jQuery动态增减行的实例代码解析(推荐)
2016/12/05 Javascript
JS前端加密算法示例
2016/12/22 Javascript
jquery实现点击a链接,跳转之后,该a链接处显示背景色的方法
2018/01/18 jQuery
json对象及数组键值的深度大小写转换问题详解
2018/03/30 Javascript
JavaScript实现图片懒加载的方法分析
2018/07/05 Javascript
微信头像地址失效踩坑记附带解决方案
2019/09/23 Javascript
在Vue中使用mockjs代码实例
2020/11/25 Vue.js
如何在vue中使用video.js播放m3u8格式的视频
2021/02/01 Vue.js
[47:26]完美世界DOTA2联赛 LBZS vs Forest 第二场 11.07
2020/11/09 DOTA
[05:09]DOTA2-DPC中国联赛2月22日Recap集锦
2021/03/11 DOTA
Python中用Ctrl+C终止多线程程序的问题解决
2013/03/30 Python
python结合shell查询google关键词排名的实现代码
2016/02/27 Python
Python的SQLalchemy模块连接与操作MySQL的基础示例
2016/07/11 Python
使用python3调用wxpy模块监控linux日志并定时发送消息给群组或好友
2019/06/05 Python
对django的User模型和四种扩展/重写方法小结
2019/08/17 Python
解决pytorch报错:AssertionError: Invalid device id的问题
2020/01/10 Python
python 一维二维插值实例
2020/04/22 Python
Anaconda+vscode+pytorch环境搭建过程详解
2020/05/25 Python
python爬虫爬取淘宝商品比价(附淘宝反爬虫机制解决小办法)
2020/12/03 Python
MADE法国:提供原创设计师家具
2018/09/18 全球购物
审核会计岗位职责
2013/11/08 职场文书
2014年父亲节活动方案
2014/03/06 职场文书
年会搞笑主持词
2014/03/27 职场文书
机关门卫的岗位职责
2014/04/29 职场文书
质量月活动总结
2014/08/26 职场文书
电影开国大典观后感
2015/06/04 职场文书
大学毕业生自我鉴定范文
2019/06/21 职场文书
导游词之云南丽江古城
2019/09/17 职场文书
HTML基础详解(下)
2021/10/16 HTML / CSS
基于Python实现nc批量转tif格式
2022/08/14 Python