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 相关文章推荐
js+HTML5基于过滤器从摄像头中捕获视频的方法
Jun 16 Javascript
javascript随机显示背景图片的方法
Jun 18 Javascript
jQuery无刷新上传之uploadify3.1简单使用
Jun 18 Javascript
Angular2 (RC4) 路由与导航详解
Sep 21 Javascript
Javascript 对cookie操作详解及实例
Dec 29 Javascript
JS创建Tag标签的方法详解
Jun 09 Javascript
JavaScript实现音乐自动切换和轮播
Nov 05 Javascript
mongoose更新对象的两种方法示例比较
Dec 19 Javascript
vue里面父组件修改子组件样式的方法
Feb 03 Javascript
浅谈webpack 自动刷新与解析
Apr 09 Javascript
vue实现侧边栏导航效果
Oct 21 Javascript
jQuery实现鼠标放置名字上显示详细内容气泡提示框效果的方法分析
Apr 04 jQuery
图片动画横条广告带上下滚动可自定义图片、链接等等
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正则
2006/07/07 PHP
简单PHP上传图片、删除图片实现代码
2010/05/12 PHP
php源代码安装常见错误与解决办法分享
2013/05/28 PHP
PHP计算加权平均数的方法
2015/07/16 PHP
Javascript注入技巧
2007/06/22 Javascript
分别用marquee和div+js实现首尾相连循环滚动效果,仅3行代码
2011/09/21 Javascript
jquery实现带二级菜单的导航示例
2014/04/28 Javascript
在Ubuntu上安装最新版本的Node.js
2014/07/14 Javascript
node.js中的console.timeEnd方法使用说明
2014/12/09 Javascript
项目中常用的JS方法整理
2015/01/30 Javascript
jQuery的事件委托实例分析
2015/07/15 Javascript
jQuery实现的网页竖向菜单效果代码
2015/08/26 Javascript
Bootstrap实现下拉菜单效果
2016/04/29 Javascript
老司机带你解读jQuery插件开发流程
2016/05/16 Javascript
基于Bootstrap实现tab标签切换效果
2020/04/15 Javascript
解析NodeJs的调试方法
2016/12/11 NodeJs
完美解决node.js中使用https请求报CERT_UNTRUSTED的问题
2017/01/08 Javascript
微信小程序实现验证码获取倒计时效果
2018/02/08 Javascript
vue-dplayer 视频播放器实例代码
2019/11/08 Javascript
浅谈vue中document.getElementById()拿到的是原值的问题
2020/07/26 Javascript
javascript前端实现多视频上传
2020/12/13 Javascript
[03:17]2016完美“圣”典风云人物:冷冷专访
2016/12/08 DOTA
Python的函数嵌套的使用方法
2014/01/24 Python
基于python的Tkinter实现一个简易计算器
2015/12/31 Python
对Python中DataFrame选择某列值为XX的行实例详解
2019/01/29 Python
python文件转为exe文件的方法及用法详解
2019/07/08 Python
python实现手势识别的示例(入门)
2020/04/15 Python
Html5饼图绘制实现统计图的方法
2020/08/05 HTML / CSS
销售自我评价
2013/10/22 职场文书
校园报刊亭的创业计划书
2014/01/02 职场文书
西安交大自主招生自荐信
2014/01/27 职场文书
园林技术个人的自我评价
2014/02/15 职场文书
2014年迎新年活动方案
2014/02/19 职场文书
2014保险公司内勤工作总结
2014/12/16 职场文书
女性健康讲座主持词
2015/07/04 职场文书
MYSQL 无法识别中文的永久解决方法
2021/06/03 MySQL