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" onmouseover="this.className=‘aa‘" onmouseout="this.className=‘a‘">欧洲5大联赛
<div class="b" onmouseover="this.className=‘bb‘" onmouseout="this.className=‘b‘">英超
<div class="c" onmouseover="this.className=‘cc‘" onmouseout="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" onmouseover="this.className=‘dd‘" onmouseout="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>

  

时间: 2024-10-05 12:20:13

HTML显示与隐藏的相关文章

jsp页面做文件上传时遇到要根据登陆名按钮显示或隐藏的情况

项目遇到的情况要根据登陆的角色不同显示或隐藏按钮,因为之前没有遇到过 所以有些不知道怎么下手,百度解决了 方法如下: document.getElementById("#anniu").hide() <button id="anniu">隐藏按钮</button>

javascript页面详细信息的显示和隐藏

页面详细信息的显示和隐藏 <!DOCTYPE html> <html> <head> <title></title> </head> <body> <script type="text/javascript"> function show_detail(detail){ var p=document.getElementById('p'); if(detail.open){ p.style.

Android 输入法的显示和隐藏

// 隐藏输入法 InputMethodManager imm = (InputMethodManager) getApplicationContext().getSystemService(Context.INPUT_METHOD_SERVICE); // 显示或者隐藏输入法 imm.toggleSoftInput(0, InputMethodManager.HIDE_NOT_ALWAYS); toggleSoftInput 这个方法可以转换软件输入法在窗体中的显示状态.如果输入法当前是显示状

[Easyui - Grid]为easyui的datagrid、treegrid增加表头菜单,用于显示或隐藏列

为easyui的datagrid.treegrid增加表头菜单,用于显示或隐藏列 /** * @author 孙宇 * * @requires jQuery,EasyUI * * 为datagrid.treegrid增加表头菜单,用于显示或隐藏列,注意:冻结列不在此菜单中 */ var createGridHeaderContextMenu = function(e, field) { e.preventDefault(); var grid = $(this);/* grid本身 */ var

安卓监听键盘显示和隐藏

问题概况:横板cocos2dx游戏,点击输入框弹出键盘时,界面要求跟随网上平易,不能挡住输入框.这种问题只出现在非全屏键盘到情况下. 方案1:mainActivity重写onconfigurationChanged,监听屏幕方向旋转,添加Android:configChanges="orientation|keyboard". 缺点全屏下无效,如果设置为非全屏,<activity android:theme="@android:style/Theme.NoTitleBa

jQuery将物体居中,并且转换显示和隐藏

今天来给大家贴一段代码,代码的作用就是利用jQuery将物体居中,并且转换显示和隐藏: 首先建立一个div标签并且写好css样式,具体如下 然后我想要的效果是当我点击了button这个按钮,test可以居中显示,第二次点击一次test消失,第三次点击又居中显示,这样循环下去: 具体js代码如下: 稍微解释一下代码的意思: 1.$('#test').get(0).flag = true;是为了建立一个标识,告诉浏览器什么时候应该显示,什么时候应该隐藏 2.上面的top就是让浏览器窗口的高度减去自己

如何控制android系统中NavigationBar 的显示与隐藏

我们使用的大多数android手机上的Home键,返回键以及menu键都是实体触摸感应按键.如果你用Google的Nexus4或Nexus5话,你会发现它们并没有实体按键或触摸感应按键,取而代之的是在屏幕的下方加了一个小黑条,在这个黑条上有3个按钮控件,这种设置无疑使得手机的外观的设计更加简约.但我遇到身边用Nexus 4手机的人都吐槽这种设计,原因很简单:好端端的屏幕,被划出一块区域用来显示3个按钮(如下图所示):Back, Home, Recent.并且它一直用在那里占用着. 在androi

jQuery判断元素是否显示与隐藏

jQuery判断一个元素是显示还是隐藏,jQuery使用is()方法来判断一个元素是否显示,反之则为隐藏 核心代码 if($("#username").is(":hidden")){ } 实例代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>test.html</ti

NGUI 便捷的显示与隐藏界面

所有的UI都继承自class UIBase,可以把UI做成预设体,同个场景下,读取预设体时,将子UI对象都保存在类似Dictionary<UIType, UIBase>这样的结构中,这样的一个好处就是可以很方便的用一个for循环去控制同个场景下的UI显示与隐藏,比如(C#代码): void ShowUI(UIType type) { foreach (KeyValuePair ui in uiDic) { if (type == ui.key) { uiDic.Show(); } else {

css 实现 ul li 的显示与隐藏

本文从CSS角度来实现导航栏的显示与隐藏,用到了ul.li标签 html源代码: css文件: 有点小感悟:总是先设置默认情况:默认不显示或者默认黑色,然后再设置hover时的具体情况 li颜色变化比较简单:设置个全局颜色(默认颜色),然后li:hover设置hover时的颜色: li 显示比较复杂,因为涉及到自菜单显示情况:总是先设置下属所有子菜单全显示,然后设置间接子菜单不显示(存在间接子菜单的情况).