纯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: 8 px ; height: 30 px ; line-height: 30 px ; cursor: pointer }
#demo   dl   dd :hover { background-color: #888 ; color: #fff }

另, 本文仅是一种CSS思路, 实际应用,请自行权衡项目需求.

 

原文发布于Mr.Think的博客: http://mrthink.net/css-li-background-hover/ 转载请注明