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

当光标移动到某些元素上时，会弹出像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>

赞 (0)

相关推荐

  • JQuery实现鼠标移动到图片上显示边框效果

    复制代码 代码如下: 以下为程序代码:<!DOCTYPE html/> <head> <script type="text/javascript" src="http://www.w3school.com.cn/jquery/jquery.js"></script> <script type="text/javascript"> $(function() { $(".v&quo

  • Jquery实现鼠标移上弹出提示框、移出消失思路及代码

    思路: 1.首先要定位实现这种效果的元素 ,本次通过class 2.如果是动态显示不同的提示内容,需设置title 3.通过JQ给定位到元素加上 mouseover 和mouseout 事件 4.再完善下,弹出框跟随鼠标在目标元素上移动 5.再把 mouseover .mouseout 合并成 hover 复制代码 代码如下: //页面加载完成 $(function () {     var x = 10;     var y = 20; //设置提示框相对于偏移位置,防止遮挡鼠标     $(

  • jquery实现标签上移、下移、置顶

    eg:如在后台的标签列表中,实现上移.下移.置顶功能 主要实现思路是节点操作,比如说:上移,直接把点击项移动到前一个节点,以此类推,当然实际代码实现还要加些判断,如当前点击操作项是否已经是置底或置底了,如果是则给点相应提示,好让操作者知道发生了什么事情. 思路: 1.先用到的克隆方法.clone(true): 即把当前要移动的项先保存好,备于后用. 2.找到当前标签所对应的相关元素及其相关方法: 如:.prev()当前元素上面的标签 .next()当前元素下面的标签 .after()xxx之后添

  • 用jQuery toggleClass 实现鼠标移上变色

    按钮移上变色效果 复制代码 代码如下: <style> .round-corner-btn { -moz-border-radius:4px; -webkit-border-radius: 4px; -khtml-border-radius: 4px; border-radius: 4px; width:200px; height:40px; line-height: 40px; background: green; display:inline-block; color:white; tex

  • jquery实现tr元素的上下移动示例代码

    复制代码 代码如下: <html> <head> <title></title> <style type="text/css" > table { background:#949494; width:400px; line-height:20px;} td { border-right:1px solid gray; border-bottom:1px solid gray; } </style> <scri

  • jQuery操作Select的Option上下移动及移除添加等等

    复制代码 代码如下: <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="jquery-1.9.1.min.js"></script> <script type="text/javascript"> /**

  • Jquery实现Div上下移动示例

    复制代码 代码如下: $(this).ready(function() { $(".up").each(function() { $(this).click(function() { var $tr = $(this).parents("li"); if ($tr.index() != 0) { $tr.prev().before($tr); } }); }); var trLength = $(".down").length; $("

  • jquery实现列表上下移动功能

    jquery实现列表上下移动功能

    废话少说,我们开始进入主题. 今天我们实现的是一个列表页面上移.下移功能.如图: 当勾选列表中的列时,点击上移或者下移,会动态上移或者下移. html代码如下: <div> <input type="button" onclick="up();" value=" 上移 "> <input type="button" onclick="down();" value="

  • jQuery实现表格行上移下移和置顶的方法

    本文实例讲述了jQuery实现表格行上移下移和置顶的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <ti

  • jquery 按钮状态效果 正常、移上、按下

    在网页设计过程中,经常遇见按钮的各状态效果.写了一个jquery扩展,使这个过程更方便! 使用前注意引用Jquery: JqueryExtend.js: 复制代码 代码如下: (function ($) { // Button按钮的三种样式替换,如果isState参数为True则记录按下状态 $.fn.btnEffect = function (normal, mouseover, mousedown, isState) { var lastButton; this.each(function

随机推荐