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>
    
    多看一行书,就少写一行代码,记录点滴,用心生活。
  • 相关阅读:
    TypeError: Cannot destructure property `compile` of 'undefined' or 'null'
    关于Django多变关联查询的orm操作
    面试概念题
    飞机大战项目开发
    scrapy爬取的数据异步存储至MySQL
    卷积神经网络数据识别
    深度学习之TensorFlow
    随机森林的使用
    kaggle平台的配置与使用
    机器学习
  • 原文地址:https://www.cnblogs.com/aegisada/p/4242537.html
Copyright © 2011-2022 走看看