jQuery实现鼠标移上弹出提示框,移出消失

标签: jquery 鼠标 移出 | 发表时间:2014-01-08 01:59 | 作者:itmyhome
出处:http://blog.csdn.net

<TD>里有一行数据 “那片笑声让我想起......”  假设超出规定长度将用......代替,

而现在要通过鼠标移动到......上 显示全部内容,移出则消失。如下图:

<a href='#' onMouseOver='mouseOver(this,event,"+s+");' onMouseOut='mouseOut();'>.....</a>
//data是提示框要显示的全部内容

CSS

.tooltip {
  position: absolute;
  display: none;
  z-index: 9900000;
  outline: none;
  padding: 5px;
  border-width: 1px;
  border-style: solid;
  border-radius: 5px;
  -moz-border-radius: 5px 5px 5px 5px;
  -webkit-border-radius: 5px 5px 5px 5px;
  border-radius: 5px 5px 5px 5px;
}

function mouseOver(t,e,data){
     //参数含义  
     //t:指当前对象,即超链接<a>
     //e:event事件
     //data:要显示的内容
     var tooltipHtml = "<div id='tooltip' class='tooltip'>"+data+"</div>";
     $(t).append(tooltipHtml); //添加到页面中  
     $("#tooltip").css({  
          "top": (e.pageY) + "px",  
          "left": (e.pageX) + "px" 
     }).show("fast"); //设置提示框的坐标,并显示 
}
function mouseOut(){
     $("#tooltip").remove();  
}


-----------------------华丽的分割线------------------------------

另一种方法:

<a id="myTip">鼠标移在我上面有惊喜!</a>

$(document).ready(function(){
	$("#myTip").mouseover(function(event){
		var tooltipHtml = "<div id='tooltip' class='tooltip'>Hello!</div>";
		$(this).append(tooltipHtml);
		 $("#tooltip").css({  
			 "top": (event.pageY) + "px",  
	         "left": ($(this).width()) + "px"  //紧跟在内容的后面
	     }).show("fast"); //设置提示框的坐标,并显示 
	}).mouseout(function(){
		$("#tooltip").remove();
	})
})

$(this) :获得当前对象
$(this).width() :获得当前对象的宽度值
event.pageY  :事件在网页中的y轴坐标



作者:itmyhome 发表于2014-1-7 17:59:26 原文链接
阅读:64 评论:0 查看评论

相关 [jquery 鼠标 移出] 推荐:

jQuery实现鼠标移上弹出提示框,移出消失

- - CSDN博客Web前端推荐文章
里有一行数据 “那片笑声让我想起......”  假设超出规定长度将用......代替,. 而现在要通过鼠标移动到......上 显示全部内容,移出则消失. ..... //data是提示框要显示的全部内容.

用jQuery实现鼠标在table上移动进行样式变化

- - CSDN博客推荐文章
$("table tr:nth-child(even)").addClass("striped");   偶数行 变化. $("table tr:nth-child(odd )").addClass("striped");   奇数行 变化. 作者:sgp4205 发表于2013-6-20 15:25:39 原文链接.

JQuery 选择器

- - CSDN博客Web前端推荐文章
}

点击我

.    像上面这样把JavaSript代码和HTML代码混杂在一起的做法同样也非常不妥,因为它并没有将网页内容和行为分离,所以才有JQuery选择器的学习.

点击我

. //给class为demo的元素添加行为.

jquery操作xml

- - CSDN博客Web前端推荐文章
jquery真的很强大,虽然一直在用jquery,不用一直都没有深入,这几天重新学习了一下,不得不感叹她的强大,已经让我深深入迷. 这里记录一下,她是怎么快速地操作xml的.. 这里我们有一个xml文件:. jquery如何操作呢,总的思想,就是和操作dom差不多的方法. 首先我们获取这个文件的内容:(我先引入jquery库哈).

jQuery JSONP跨域

- - Web前端 - ITeye博客
基于Jquery的Ajax跨域访问. 单点登录服务器(sso服务器). 登录网页项目的时候,由于使用了单点登录,所以页面会跳转到sso服务器,进行统一登录,. 现在需要在该界面增加令牌的认证,但是SSO服务器和令牌服务器部署在不同的服务器,且暂时没有要合并的可能,所以在SSO登录的时候必须要对令牌进行验证,就必须涉及到了跨域访问的问题.

jquery 插件

- - JavaScript - Web前端 - ITeye博客
 jQuery插件的开发包括两种:. 一种是类级别的插件开发,即给jQuery添加新的全局函数,相当于给jQuery类本身添加方法. jQuery的全局函数就是属于jQuery命名空间的函数,另一种是对象级别的插件开发,即给jQuery对象添加方法. 下面就两种函数的开发做详细的说明. 1 、类级别的插件开发.

让jquery更快

- - JavaScript - Web前端 - ITeye博客
很久没有关注jQuery了,最近重新看了一下,看到一些不错的文章,转来坐一下笔记. 其内容和一些新提供的方法还是很多有值得学习的地方. 使用最新版本的jQuery. jQuery的版本更新很快,你应该总是使用最新的版本. 因为新版本会改进性能,还有很多新功能. 下面就来看看,不同版本的jQuery性能差异有多大.

jQuery Tools:Web开发必备的 jQuery UI 库

- - 博客园_首页
jQuery Tools 是基于. jQuery 开发的网站界面库,包含网站最常用的Tabs(选项卡)、Tooltip(信息提示)、Overlay(遮罩、弹窗)、Scrollable(滚动控制)、Form Validator(表单验证)、Rangeinput(范围选择)、Dateinput(日期选择)等众多功能.

jQuery基础之jQuery的DOM操作

- - CSDN博客推荐文章
 为了能全面地讲解DOM操作,首先需要构建一个网页. 因为每一张网页都能用DOM表示出来,而每一份DOM都可以看作一棵DOM树.    

你最喜欢的水果是?

 .      
  • 苹果
  •  .      
  • 橘子
  •  .

    jQuery最佳实践

    - andi - 阮一峰的网络日志
    上周,我整理了《jQuery设计思想》. 那篇文章是一篇入门教程,从设计思想的角度,讲解"怎么使用jQuery". 今天的文章则是更进一步,讲解"如何用好jQuery". 我主要参考了Addy Osmani的PPT《提高jQuery性能的诀窍》(jQuery Proven Performance Tips And Tricks).