li内图文rollover效果

此效果要实现的是鼠标经过LI出现白背景，而LI内有小图标和文字。呵呵，看上去简单的效果，则有许多思路来实现，我们给每个导航加不同的小图标，就需要单独定义三个CLASS，用来背景来显示几个透明的小图。我们都知道用背景来显示图片可以精确的定位小图位置，和文字协调。在页面里，可以将给LI加CLASS，也可以给A加CLASS。但是这两个效果都不好，不是鼠标经过显示不了小图标，就是图标在背景外。那么就在文字前面加个SPAN标签，用来显示图片。SPAN是行内元素，所以需要使用DISPLAY:BLOCK来使其块状显示。然后左浮动，如果不加浮动文字会回行，因为SPAN已经是块状显示了。OK，效果出来了。查看效果

[本日志由 dangbao 于 2008-11-13 09:35 AM 编辑]
文章来自: 本站原创
引用通告: 查看所有引用 | 我要引用此文章
Tags: 图文rollover效果图文rollover效果