鼠标经过显示文本信息

作者：袖梨 2022-07-02

YPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.***w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

提示：您可以先修改部分代码再运行

<title>JS</title>
<style type="text/<a href=" http: target="_blank">css">
.lookMe{
	color:#0099FF;
	cursor:pointer;
}
.lookMe span{
	display:none;
	position:absolute;
	/*left:50px;
	top:20px;*/
	padding:5px;
	
	color:#CC3300;
	background:#FFFADC;
	border:1px solid #CC6600;
}
</style>

<div onmouseover="lookMe(this);" class="lookMe" onmousemove="mouseMove(event);">闷战120分钟点球战4-2 西班牙破魔咒淘汰意大利
<span>1.雅虎体育讯 北京时间6月23日,2008欧洲足球锦标赛在瑞士奥地利继续进行,在一场四分之一决赛中,西班牙队迎来了上届世界杯冠军意大利队,90分钟与加时赛双方均一球未进,在最终的点球大战中,西班牙4:2击败了对手,昂首挺进四强。</span>
</div>
<div onmouseover="lookMe(this);" class="lookMe" onmousemove="mouseMove(event);">闷战120分钟点球战4-2 西班牙破魔咒淘汰意大利
<span>2.在一场四分之一决赛中 </span>
</div>
<div onmouseover="lookMe(this);" class="lookMe" onmousemove="mouseMove(event);">闷战120分钟点球战4-2 西班牙破魔咒淘汰意大利
<span>3.2008欧洲足球锦标赛在瑞士奥地利继续进行,在一场四分之一决赛中,西班牙队迎来了上届世界杯冠军意大利队,90分钟与加时赛双方均一球未进,在最终的点球大战中,西班牙4:2击败了对手,昂首挺进四强。</span>
</div>
<script>

function lookMe(thisTag){
	var span = thisTag.getElementsByTagName('span')[0];
	span.style.display = 'block';
	thisTag.onmouseout = function(){
		span.style.display = 'none';
	}
}

function mouseMove(event){
	var xx=event.clientX + 5;
	var yy=event.clientY + 10;
	var obj = event.srcElement ? event.srcElement : event.target;
        var span=obj.getElementsByTagName("span")[0];
	span.style.left = xx + 'px';
	span.style.top = yy + 'px';
}
</script>

提示：您可以先修改部分代码再运行

鼠标经过显示文本信息

相关文章

精彩推荐