I work hard, so you don't have to

CSS hover fun

Many of you coders will know about mouseover events, but how many knew about CSS hover functions. Again, I think all of you. However let's set the bar a little bit heigher.
Creating windows style flyouts are no longer the domain for javascript gurus and coding gods. You can make basic functionality within 30 minutes, then extend it and make it perfect.

Step 1:
a{ color:#00ff00;}
a:hover {color:#ff0000;}
The above will turn all hyperlinks green and change the hover colour to red. Thats a piece of piss if you ask me but thats not the tricky bit. The next bit is the tricky bit.

Step 2:
The tricky bit is also the fun bit. take this CSS snipet...
a{ color:#00ff00;}
span{ color:#0000ff;}
a:hover span {color:#ff0000;}
Now the contents of the span will become red and not the link.
Admittedly you don't really want to make a hyperlink change the color of some different text, but now with this functionality you can use display:block or a whole hoard of CSS design things to jazz up your page. I did make a page once that was an "emulation" of windows. when I find it I will post the link here and you will see what you can do.

Windows emulation
Copyright 2011 CodersAdvocate ©