Pure CSS3 Code Implementation table parity line color, mouse hover color

1, the first will use the <tr></tr> elements two pseudo-class, nth-child () and hover.

It is then important to note that the pseudo-class is referenced by a colon, not the dot number, or tr:hover{}

Second, the CSS code should be aware of the order.

tr:nth-child (Odd) {    background-color:#CFF;} Tr:nth-child (even) {    background-color:#699;} Tr:hover {    background-color:#F0C;}

This is the function that is required to be completed normally, but

If you write:

Tr:hover {    background-color:#F0C;} tr:nth-child (Odd) {    background-color:#CFF;} Tr:nth-child (even) {    background-color:#699;}

So I'm sorry, hover's function is not possible. can only achieve odd and even row of different colors, can not achieve the floating color.

The difference between the two ends of the code is that the location of the Tr:hover code is not the same.

The following is the complete code:

<!         DOCTYPE html>{margin:0px Auto;}tr:nth-child (Odd){Background-color:#CFF;}Tr:nth-child (even){Background-color:#699;}Tr:hover{Background-color:#F0C;}</style> 

Running in Browser:

This time the mouse hovers over the third line.

Pure CSS3 Code Implementation table parity line color, mouse hover color