zoukankan      html  css  js  c++  java
  • 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 = 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>
    
    多看一行书,就少写一行代码,记录点滴,用心生活。
  • 相关阅读:
    288.软件开发过程与软件测试
    287.软件测试概述
    离散数学课程重点
    博客园美化
    渗透测试-Getshell总结
    C++迭代器
    每日一题2
    计算机网络面试总结(传输层)
    每日一题-1
    网络安全必备技能
  • 原文地址:https://www.cnblogs.com/aegisada/p/4242537.html
Copyright © 2011-2022 走看看