jQuery实现鼠标移到元素上动态提示消息框效果_Javascript教程-查字典教程网
jQuery实现鼠标移到元素上动态提示消息框效果
jQuery实现鼠标移到元素上动态提示消息框效果
发布时间:2016-12-30 来源:查字典编辑
摘要:当光标移动到某些元素上时,会弹出像tips的提示框。复制代码代码如下:jQuery动态提示消息框效果*{font-family:monaco...

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

复制代码 代码如下:

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>jQuery动态提示消息框效果</title><>

<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">

柯乐义

<div 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">

jQuery

<div 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">

HTML5

<div 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">

Javascript

<div title="Javascript介绍">

在javascript中,变量的作用域有全局(window对象)作用域和函数调用作用域。<br />

js获取本机的外网/广域网ip地址<br /><br /><br />

更多信息请访问:http://so.keleyi.com/ <br />

搜索:Javascript作用域<br />

js获取本机的外网/广域网ip地址<br />

</div>

</div>

<div>

<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教程学习
    热门Javascript教程学习
    编程开发子分类