Wednesday, August 18, 2004

Using multiple pseudo-classes in one selector

So just for fun, I wanted to see if I could make Table Ruler style effects using only the :hover pseudo-class. Of course, that was pretty simple. I could get most anything I wanted done just using: tr:hover { }.

Quickly I realized that I could have more fun. What if I wanted to differentiate not only the row, but the cell. And this was born:

Hover over these rows and table cells
Column 1 Column 2 Column 3
Lorem ipsum dolor sit amet, consectetuer adipiscing elit Vivamus cursus iaculis ante. Etiam mi nulla, porttitor vitae, euismod in, pharetra in
Lorem ipsum dolor sit amet, consectetuer adipiscing elit Vivamus cursus iaculis ante. Etiam mi nulla, porttitor vitae, euismod in, pharetra in
Lorem ipsum dolor sit amet, consectetuer adipiscing elit Vivamus cursus iaculis ante. Etiam mi nulla, porttitor vitae, euismod in, pharetra in

The CSS, again, is very simple:

<style type="text/css">
	table { border: 1px solid #000; width: 75%; }
	tr td { border: 1px solid #000; padding: .5em; }
	tr:hover { background-color: #eee; }
	tr:hover td { border-color: #900; } 
	tr:hover td:hover { background-color:  #ffcc00; }
</style>

I'm pretty sure that it has been along time since anything I've tried to do in CSS was difficult.

2 Comments:

At 10:05 AM, Anonymous Anonymous said...

I do not see any changes at all

 
At 6:45 AM, Anonymous ethodaddy said...

Hey there, nice css work. do you have a fix for IE browsers?

 

Post a Comment

<< Home