純CSS實現列表的背景色交替及滑鼠划過變色

用純CSS實現的列表背景色交替效果, 另外附加了個滑鼠划過變色. 其實, 這是08年寫的一個效果, 當時部落格還叫Bluebird’s sky, 哈, 如今僅剩個本地的軀殼了, 網域名稱都到期了.

列表背景色交替實現原理很簡單,用一張二倍於列表單行高度的背景圖,然後,上半部分PS成奇數行顏色,下半部分PS成偶數行顏色,然後將這張圖定義給列表外圍元素平鋪.這樣一來,縱使有萬千行,它也會輕而易舉交替顏色.相之於JS實現,它只有寥寥幾行代碼,是不是輕了許多,但有一點, 背景圖必須算好, 列表高度值也必須固定, 否則就悲劇了.
滑鼠划過效果,不多言了, 定義元素的:hover. 悲劇的是, 萬惡的是IE6不支援.

CSS核心代碼點此查看DEMO

#demo dl{background:url(http://mrthink.net/demo/images/bg_dd1x60.png)}
#demo dl dd{padding-left:8px;height:30px;line-height:30px;cursor:pointer}
#demo dl dd:hover{background-color:#888;color:#fff}
另, 本文僅是一種CSS思路, 實際應用,請自行權衡項目需求.

 

原文發佈於Mr.Think的部落格: http://mrthink.net/css-li-background-hover/ 轉載請註明