onMouseover Hover Effect for Images and Text

When the web was in its infancy, I remember doing rollovers with javascript. Then I applied the same method to HTML A tags to change color or underline or both whenever a mouse hovered over it.

I can remember doing this at one point:

example:
Zedwood - Code For Monkeys

Then css provided a better way. This reduced the amount of html you had to write. This css makes all the HTML A tags blue... and then underlined when hovered over:


example: Zedwood - Code For Monkeys

I searched around for a while to figure out how to make an HTML IMG tag highlighted when the onmouseover event occurred. Highlight you say? Its not text so you can't just underline it. I wanted to have a border around the image, that changed color when you hovered over the image... and I wanted the image to be embedded in an HTML A tag, and I wanted it all to happen in CSS. I had seen other sites do it this way so i knew it was possible. I finally had to take apart the html and css from cbc.ca and after my own mods here is the result:


example:

Lets examine the css rules. These apply to all HTML A tags that are set to class imghover. The first rule states that the text within any HTML A tag will be the color #35A, and not underlined. The second rule states that when the HTML A tag is in the hover state (onmouseover) that any text within the tag will be underlined. Okay this is just like the previous examples so far. The third rule states that any HTML IMG tag within the HTML A tag will have a grey border. Finally the fourth rule states that when the HTML A tag that is in a hover state the
HTML IMG tag's border will change color to #35a, a light blue.

This is pretty much the only way to get it to work. The reason is, all HTML A tags have a hover state... but img tags do not. So, img:hover would not work.