First of all a pseudo class cannot be defined as an inline style. Common pseudo classes include :hover, :focus, [attr="name"].
Read on to see the common causes of this issue and how to fix them so that CSS pseudo classes like :hover and :visited work again!
Cause #1
When you use pseudo class make sure you do NOT use inline style on the target element. For example suppose you have a <div class='summary'> element whose original background color is white, and you'd like its background color to change to red when being hovered. Say you do the following in your HTML.
...
<style>
.summary:hover{
background: red;
}
</style>
...
<div class='summary' style='background: white'>This is an example.</div>
...Your div element will always have white background regardless of being hovered. This is because your inline styles have the highest specificity and even overrides pseudo class such as :hover. Suppose your original styles and hovered styles do not share the same attribute then the above way would work. For instance the element's original style has a white background and the element's hovered style has a red font.
The correct way is the following.
...
<style>
.summary{
background: white;
}
.summary:hover{
background: red;
}
</style>
...
<div class='summary'>This is an example.</div>
...Questions?Cause #2
CSS pseudo classes have existed for a long time and new pseudo classes are defined in CSS 1, CSS 2.1, CSS 3. Some web browsers or some versions of web browsers have a different level of support for all these CSS pseudo classes.
For example :hover is only partially supported by Internet Explorer 6. Another example is :focus is not supported by Internet Explorer 6 and Internet Explorer 7.
For a complete listing refer to http://kimblim.dk/css-tests/selectors/.
If you have any questions let me know and I will do my best to help you!
Posts
