The background color of the List is switched by pure CSS and the color changes when the mouse is crossed.

The list background color alternate effect is achieved with pure CSS, and a mouse is appended to the color. in fact, this was an effect written in. At that time, my blog was also called bluebird's sky. Now there is only a local shell, and all domain names have expired.

The principle of switching the list background color is very simple. Use a background image that is twice the height of a single row in the list. Then, the upper half is in the odd color, and the lower half is in the even color, the image is then defined as tiled by the peripheral elements of the list. in this way, even if there are thousands of rows, it will easily alternate colors. similar to the JS implementation, it only has a few lines of code, isn't it much lighter, but one thing, the background image must be well calculated, and the list height value must be fixed, otherwise it will be a tragedy.
If you move the mouse over the screen, you can easily define the hover element. The tragedy is that ie6.

CSS CoreCodeClick here to view the 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 }
In addition, this article is only a CSS idea. For practical application, please weigh the project requirements on your own.

 

published in mr. Think blog: http://mrthink.net/css-li-background-hover/ reprinted please note