- Getting a mouse hover effect on an image
- Getting a <div> or say a HTML region to be highlighted on mouse hover
- Getting a text link to depict a particular color when it has been visited or active
Using CSS pseudo-classes for the above named scenarios is very apt for a designer coz it is not only easy to use it but also easy to maintain the code from maintenance and readability point-of-view. As fate might have it, different browsers react in a different way to CSS pseudo-classes. Fortunately, since Firefox, Chrome, Opera and Safari are Webkit based browsers, they don’t have any issues working with it. This leaves behind – Internet Explorer, which behaves awkwardly to CSS pseudo-classes. Following are some scenarios which I’ve personally witnessed in which CSS pseudo-classes cease to work in IE:
- If applied the :hover class to an image, it doesn’t work sometimes.
- If applied the :link, :visited, :hover and :active class to a text anchor, it behaves awkwardly.
So enter – whatever:hover, an open-source project to fix up this quirk with Internet Explorer. It uses the behavior attribute in CSS (works only in IE) to refer a '.htc' file which is a script defining a special behavior to perform. This behavior attribute has to be declared for the <body> tag so that it runs for the entire web-page.
A short example you can try for a Horizontal Menu using CSS pseudo-classes Here.
- You can download the .htc file (behavior file) Here.
- Read more on CSS 'behavior' attribute Here.
- More on the whatever:hover project and its progress Here.