Follow this Blog!

Jul 16, 2013

f Comment

CSS Pseudo Class Does NOT Work! Why? How Does CSS Pseudo Class Work Anyway?

Amazon When you create a :hover style for an HTML element such as a div or span element you realize it does not work. You think you have defined all the necessary styles and your CSS and HTML syntax is all good. What's wrong?

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!
Please leave a comment here!
One Minute Information - by Michael Wen
Find Michael on Google or Facebook
ADVERTISING WITH US - Direct your advertising requests to Michael