- 本栏最新文章
- 如何用css控制一个容器的显示与隐藏？ 03-27
- 如何实现未知高居垂直居中？ 03-27
- IE7新支持的CSS选择器有哪些？ 03-27
- 如何制作div+css保持xhtml语义结构的表单？ 03-27
- 应用DIV+CSS布局以后 该在什么时候使用TABLE？ 03-27
- 关于条件注释的几个实例代码 03-25
- Web标准设计技巧之一 文本排版浅议 03-25
- Marquee为什么不符合WEB标准？ 03-25
- CSS实战：id是狙击枪 class是双刃剑 合则两利... 03-22
- Div CSS：并非所有内容都必须要div做“容器” 03-22
- 本栏推荐文章
- Photoshop教程：水灵灵的美女调出来 12-30
- AS3与后台交互 12-21
- AS3通俗教程---AS3自身loading制作 12-19
如何用css控制一个容器的显示与隐藏？
根据页面的需要有时候我们需要隐藏一些元素，但当鼠标移到某一个区域的时候，我们希望这些隐藏的元素显示出来。用css网页布局，我们该如何实现呢？
首先我们将这一隐藏元素在页面中隐藏掉，可以应用displasy属性，关于displasy属性可以参考这里。
我们再对链接添加onMouseOver、onMouseOut的小脚本，改变displasy属性的相关值，让隐藏的元素显示出来即可。我们看下面的xhtml代码：
Example Source Code [www.52css.com]
<a href="http://www.52css.com/" style="color:blue"
onMouseOver="document.all.hehe.style.display='block'"
onMouseOut="document.all.hehe.style.display='none'">
我爱CSS - www.52css.com</a> 我们看下面的运行效果：
Source Code to Run [www.52css.com]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>www.52css.com</title>
<style type="text/css">
<!--
div {
position:absolute;
width:300px; height:300px; z-index:1;
margin:100px 0 0 100px;
background: #f0f0f0;
border: 1px solid #c00;
display:none;
}
-->
</style>
</head>
</body>
<a href="http://www.52css.com/" style="color:blue" onMouseOver="document.all.hehe.style.display='block'" onMouseOut="document.all.hehe.style.display='none'">
我爱CSS - www.52css.com</a>
<div id="hehe"></div>
</body>
</html>
[ 可先修改部分代码 再运行查看效果 ]
