另一种纯CSS相册

受司徒正美兄的启发,自己也写了一个纯css的相册,利用的是a:hover伪类.实现原理是相似的.

HTML标记如下(在<a>上设置default类,以选择最初显示的图片)

<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

#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下载

转载于:https://www.cnblogs.com/kenandalda/archive/2009/09/20/1570515.html