另一种纯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下载