另一种纯CSS相册
文章来源：365jz.com 点击数：330 更新时间：2009-09-21 11:03 参与评论
受司徒正美兄的启发,自己也写了一个纯css的相册,利用的是a:hover伪类.实现原理是相似的.
HTML标记如下(在<a>上设置default类,以选择最初显示的图片)
</>code
- <div id="album">
<a href="#1" class="default">
<em><img src="i/1.jpg" /></em><span>1</span>
</a>
<a href="#2">
<em><img src="i/2.jpg" /></em><span>2</span>
</a>
<a href="#3">
<em><img src="i/3.jpg" /></em><span>3</span>
</a>
<a href="#4">
<em><img src="i/4.jpg" /></em><span>4</span>
</a>
<div>
css
</>code
- #album{
position:relative;
width:124px;
height:110px;
float:left;
}
#album a{
float:left;
text-decoration:none;
color:#000;
font-family:Arial;
margin-top:90px;
background-color:#FFF;
}
#album a img{
border:none;
}
#album span{
display:block;
height:1em;
width:1em;
}
#album a:hover{
background:transparent;/*激活IE6下的a:hover*/
}
#album a:hover span{
background-color:#CCC;
color:#FFF;
display:block;
cursor:pointer;
}
#album a:hover em,
#album a.default em{
position:absolute;
top:0;
left:0;
display:block;
}
#album a em{
display:none;
border:2px solid #CCC;
}
具体原理就不详细说了,这里谈谈IE6下的几个问题
1.IE6下必须定义a:hover本身在鼠标悬停后的样式,不然不会激活
2.本例中如果<img>标记之外没有包围<em>标记,且在css定义中直接控制<img>的显隐,IE6下会有这样的bug:当某一张图片被显示出来后,其之前的图片就无论如何显示不出来了.个人猜测可能和img标记总是有值为true的hasLayout属性有关.
最终效果截图
demo下载
Tag标签: CSS
如对本文有疑问，请提交到交流论坛，广大热心网友会为你解答！！ 点击进入论坛
您可能感兴趣的文章:
------分隔线----------------------------
