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

标签: jQuery鼠标提示框
6950人阅读 评论(0) 收藏 举报
分类:

<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轴坐标



3
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    版权声明
    本博客文章可以被转载,但未经本人许可,不得用于商业用途。 如需转载,请保证文章的完整性并注明出处。
    个人资料
    • 访问:2469419次
    • 积分:34612
    • 等级:
    • 排名:第143名
    • 原创:632篇
    • 转载:23篇
    • 译文:26篇
    • 评论:1586条
    博客统计