jQuery实现鼠标移到元素上动态提示消息框效果
2024-05-06 14:34:55
供稿：网友
当光标移动到某些元素上时，会弹出像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 />
