鼠标经过显示文本信息

时间：2022-07-02 15:13:06 编辑：袖梨来源：一聚教程网

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html" />
<title>JS</title>
<style type="text/<a href="http://www.111com.net/cssdiv/css.html" target="_blank">css</a>">
.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>
</head>

<body>

<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>

</body>
</html>

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

推荐专题

最新下载

热门教程

鼠标经过显示文本信息

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程