首页 > 代码库 > JS实现鼠标放在文字上面显示全部内容
JS实现鼠标放在文字上面显示全部内容
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 = http://www.mamicode.com/oText.value;"#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实现鼠标放在文字上面显示全部内容
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。