纯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/ 转载请注明