首页 > Web开发 > 详细

JS实现鼠标放在文字上面显示全部内容

时间:2015-01-22 21:26:43      阅读:522      评论:0      收藏:0      [点我收藏+]

web中当我们把text等的宽固定后如果文本框中内容过多就只能看到前面部分的内容,这时我们可以用样式控制当鼠标移到文本框时显示全部内容。

var pointX;
	var pointY;
	
	$(function(){
		$(".txtstyle").bind("mouseover",function(e){
		    pointX = e.pageX;
		    pointY = e.pageY;
			showTip(e);
		}).bind("mouseout",function(e){
		   closeTip()
		}).bind("mousedown",function(e){
		   closeTip()
		});;

	});
	
	function showTip(e){
	    var e = e || event;
        var oText = e.srcElement;
		var sTextValue = oText.value;
		if(sTextValue.length > 0){
	        $("#kyqToolTip").css("display","block");
	        $("#kyqToolTip").css("left",pointX+10);
	        $("#kyqToolTip").css("top",pointY-10);
		    $("#kyqToolTip").html(sTextValue);
		}
    }

 pointX,pointY用来保存鼠标所在荧幕的X、Y值。

在IE中用 e.srcElement获取鼠标点下的元素对象(这里是文本框)FF中是e.target

kyqToolTip是一个隐藏的div要设置位置为绝对的

 .tipStyle{display:none; position:absolute; background-color:#FBEC88; font-size:16px; border-right:#D0EAF9 solid 1px; border-bottom:#D0EAF9 solid 1px; border-left:#D0EAF9 solid 1px; border-top:#D0EAF9 solid 1px;}
<div id="kyqToolTip" class="tipStyle"></div>

 

JS实现鼠标放在文字上面显示全部内容

原文:http://www.cnblogs.com/aegisada/p/4242537.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!