另一种纯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
總結
- 上一篇: 股票的资金账号怎么查 有以下三种查看方式
- 下一篇: CSS3之计算长度值------calc