jQuery实现鼠标移到元素上动态提示消息框效果 - Web前端
作者：98wpeu发布时间：2026-06-09分类：网页前端技术浏览：6
导读：当光标移动到某些元素上时，会弹出像tips的提示框。复制代码代码如下:<!DOCtypehtml><HTML><head><me...
当光标移动到某些元素上时，会弹出像tips的提示框。
复制代码 代码如下:
<!DOCtypehtml>
<HTML>
<head>
<metahttp-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>
复制代码 代码如下:
<!DOCtypehtml>
<HTML>
<head>
<metahttp-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>
相关推荐
- jquery 淡入淡出效果的简单实现 - Web前端
- 基于jquery的网站幻灯片切换效果焦点图代码 - Web前端
- JQueryiframe页面操作父页面中的元素与方法(实例讲解) - Web前端
- Jquery实现鼠标移上弹出提示框、移出消失思路及代码 - Web前端
- jquery实现的一个导航滚动效果具体代码 - Web前端
- jQuery 过滤方法filter()选择具有特殊属性的元素 - Web前端
- 漂亮的jquery提示效果(仿腾讯弹出层) - Web前端
- jquery 卷帘效果实现代码(不同方向) - Web前端
- Jquery写一个鼠标拖动效果实现原理与代码 - Web前端
- JQuery中判断一个元素下面是否有内容或者有某个标签的判断代码 - Web前端
- 网页前端技术排行
- 最近发表
-
- WordPress随机显示特色图片插件：Random Post Thumbnails
- KeePass实现Chrome浏览器自动填充密码方法一
- LNMP一键包nginx 301强制跳转到https教程
- KeePass实现Chrome浏览器自动填充密码方法二
- #建站# 免费的VPS管理软件Xshell8/Xftp8中文版下载
- 使用Xshell 8连接VPS教程_电脑登录vps的方法
- WordPress评论界面添加烟花????效果
- 不同浏览器书签同步方案：坚果云+Floccus_详细使用教程
- iOS端KeePassXC客户端APP：Strongbox Password Safe
- 给WordPress评论中的Gravatar头像图片添加ALT属性