CSS :hover pseudo-class

CSS :hover Pseudo-Class

The :hover pseudo-class is used to add special effects to an element when the mouse hovers over it.

When defining pseudo-classes within a block, keep in mind the following:

a:hover must appear immediately after a:link and a:visited in the CSS definition to be effective.
a:active must be within CSS definition to take effect.
Pseudo-class names are case-insensitive.
Pseudo-classes are distinct from CSS classes, but can be used in conjunction with them.

Anchor/link elements.

The following is an example of how to use the :hover class to change the color of a link when the mouse hovers over it.

<html> 
<head> 
<style type = "text/css"> 
a:hover {color: #FFCC00} 
</style> 
</head> 

<body> 
html/index.htm">Bring Mouse Here
</body>

</html>

This will generate the following link.

CSS :hover pseudo-class

Now when you hover your mouse over this link, you’ll see its color change to yellow.