元素的隐藏与显示，很多时候我们用定位来实现；其实，细心的朋友会发现，用css的透明度也是可以实现的。
原理：先设置元素①的透明度为0、元素②的透明度为1，其次，利用父元素的hover属性设置元素①的透明度为1、元素②的透明度为0；
以下是代码：
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<style>
.trans-fadeout{
-webkit-transition:all 1s linear;
-moz-transition:all 1s linear;
-ms-transition:all 1s linear;
-o-transition:all 1s linear;
transition:all 1s linear;
}
.image-fadeout{ position:absolute;opacity:0 }
.hover-fadeout:hover .image-fadeout{ opacity:1 }
</style>
</head>
<body>
<div class="hover-fadeout">
<img src="http://www.20707.net/skin/web/index/d2.png"
class="trans-fadeout image-fadeout" />
<a href="#" _fcksavedurl=""#"" >经过我显示图片</a>
</div>
</body>
重要提示：
1、元素透明度位1时，即不透明，css代码可以直接省略不写；
2、注意透明在不同浏览器的兼容效果；
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
filter:alpha(opacity=50):这个是为IE6设的，可取值在0-100，其它三个0到1.
-moz-opacity:0.5; 这个是为了支持一些老版本的Mozilla浏览器。
-khtml-opacity: 0.5; 这个为了支持一些老版本的Safari浏览器。
opacity: 0.5; 这是最重要的，因为它是CSS标准.该属性支持firefox, Safari和 Opera.
0xe七七世界-网站建设|UI设计|人资系统|二次开发