受司徒正美兄的啟發,自己也寫了一個純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

總結

以上是生活随笔為你收集整理的另一种纯CSS相册的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。