CSS Home
CSS Reference
Pseudo Classes & Elements
© 2011 TutorialsPoint.COM
|
CSS Pseudo-class :hover
Description:
The :hover pseudo-class is used to add special effect to an element when you mouse over it.
While defining pseudo-classes in a <style>...</style> block, following points should be taken care:
a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective.
a:active MUST come after a:hover in the CSS definition in order to be effective.
Pseudo-class names are not case-sensitive.
Pseudo-class are different from CSS classes but they can be combined.
Possible Values:
- color: Any valid color value.
Applies to:
Anchor / Link element.
Example:
Following is the example which demonstrates how use :hover class to change the color of links when we bring a mouse pointer over that link.
<style type="text/css">
a:hover {color: #FFCC00}
</style>
<a href="/html/index.htm">Bring Mouse Here</a>
|
This will produce following link. Now you bring your mouse over this link and you will see that it changes its color to yellow.
To Become more comfortable - Do Online Practice
|
|
|