用纯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思路, 实际应用,请自行权衡项目需求.
不兼容 国内IE6还很多
[回复]
背景图能解决能解决背景色交替的问题是还很不错的想法，这个例子为什么要用dl和dd？ul和li不行么？如果列表内文字是一个a标签的话，在ie6下应该可以实现鼠标划过变色的问题吧，我是初学者，请多指教！
[回复]
Mr.Think 回复:
二月 25th, 2011 at 09:01
@Mr blood, ul,li也可.a标签文字变色定义伪类样式即可.
[回复]
比较炫，牛。
[回复]
不兼容决定了一切。js一行代码的事。
[回复]
Mr.Think 回复:
十二月 28th, 2010 at 10:03
@oophper, 哈,不能说不兼容决定了一切吧? Css3与Html5目前也不兼容,你也无视吗
[回复]
很不错的思路，值得学习
[回复]
好是好 只能做死了 要想兼容两个 挺麻烦的 直接搞一个就好 省的加载慢
[回复]
Mr.Think 回复:
十二月 20th, 2010 at 16:35
@***网, 本文仅是一个思维. 具体项目实现请依实际情况选择.
[回复]
一般都做分级支持了，能用原生的:hover尽量用，不能用的就JS。
[回复]
很聪明的写法，学习了。多谢博主
[回复]
隔行变色的想法真不错，不过你是用在dl和dd上，用在表格上好像IE下又有问题……
[回复]
Mr.Think 回复:
十二月 19th, 2010 at 16:14
@ZH CEXO, 这种实现方式是有局限性的. 但只要行的高度能固定应该也是可以的吧..
[回复]