HTML显示与隐藏

最新推荐文章于 2023-04-12 22:36:22 发布

weixin_30369041

最新推荐文章于 2023-04-12 22:36:22 发布

阅读量62

点赞数

文章标签： xhtml

原文链接：http://www.cnblogs.com/yuchao19950412/p/5325699.html

版权

<!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; charset=utf-8" />
<title>无标题文档</title>
</head>
<style type="text/css">
.a{
	border:1px;
	height:50px;
	width:100px;
	background:#C00;
	font-size:18px;
	left:100px;
	top:100px;
	text-align:center;
	line-height:50px;
	position:absolute;
	overflow:hidden;}
.aa{
	height:50px;
	width:100px;
	top:100px;
	left:100px;
	position:absolute;
	overflow:visible;
	line-height:50px;
	text-align:center;
	background-color:#CF0;
	} 	
		
.b{
	border:1px;
	background:#309;
	height:50px;
	width:100px;
	left:0px;
	top:50px;
	
	text-align:center;
	line-height:50px;
	position:absolute;
	overflow:hidden;
	}	
.bb{
	border:1px;
	background:#0FC;
	height:50px;
	width:100px;
	left:0px;
	top:50px;
	
	text-align:center;
	line-height:50px;
	position:absolute;
	overflow:visible;
		}
		
.c{
	border:1px;
	background:#305;
	height:150px;
	width:100px;
	left:100px;
	top:0px;
	text-align:center;
	line-height:50px;
	position:absolute;
	overflow:hidden;
	}	
.cc{
	border:1px;
	background:#0FC;
	height:150px;
	width:100px;
	left:100px;
	top:0px;
	text-align:center;
	line-height:50px;
	position:absolute;
	overflow:visible;
			}
.d{
	border:1px;
	background:#66C;
	height:50px;
	width:100px;
	left:0px;
	top:100px;
	text-align:center;
	line-height:50px;
	position:absolute;
	overflow:hidden;
	}			
.dd{
	border:1px;
	background:#77C;
	height:50px;
	width:100px;
	left:0px;
	top:100px;
	text-align:center;
	line-height:50px;
	position:absolute;
	overflow:visible;
	
	}					
table{
	height:150px;
	width:100px;
	border:0px;
	text-align:center;
	vertical-align:middle;
			}
.e{
	border:1px;
	background:#66C;
	height:150px;
	width:100px;
	left:100px;
	top:0px;
	text-align:center;
	line-height:50px;
	position:absolute;
	overflow:hidden;
	}			
.ee{
	border:1px;
	background:#903;
	height:50px;
	width:100px;
	left:100px;
	top:0px;
	text-align:center;
	line-height:50px;
	position:absolute;
	overflow:visible;
	}



</style>

<body>
<div class="a" οnmοuseοver="this.className='aa'" οnmοuseοut="this.className='a'">欧洲5大联赛
<div class="b" οnmοuseοver="this.className='bb'" οnmοuseοut="this.className='b'">英超
<div class="c" οnmοuseοver="this.className='cc'" οnmοuseοut="this.className='c'">
<table cellpadding="0" cellspacing="0">
<tr bgcolor="#CC0000"><td>曼联</td></tr>
<tr bgcolor="#000099"><td>切尔西</td></tr>
<tr bgcolor="#99FF00"><td>阿森纳</td></tr>
</table>
</div>
</div>
<div class="d" οnmοuseοver="this.className='dd'" οnmοuseοut="this.className='d'">西甲
<div class="e" >
<table cellpadding="0" cellspacing="0" height="150px">
<tr bgcolor="#CC0000"><td>皇马</td></tr>
<tr bgcolor="#99FF00"><td>巴萨</td></tr>
<tr bgcolor="#000099"><td>马德里竞技</td></tr>
</table>
</div>

</div>
</div>
</body>
</html>

转载于:https://www.cnblogs.com/yuchao19950412/p/5325699.html