Description »

Determines the properties of the element when hovered over with the mouse.

Details »

This is a pseudo class that changes the appearance of an element whenever the mouse hovers over it. This can commonly be seen with typical links like this one. Notice how an underline forms when hovered over.

Under a normal circumstance, you define how something looks by writing its name and placing what you want it to look like in the form of properties and values like so:

a{    text-decoration: none; }

Using the :hover pseudo class, you can define the "a" again and develop a second set of properties in order to determine how links look when hovered over. This site uses this code:

a:hover {
    background-color: transparent;
    text-decoration: underline;
}

Examples »

Try It on the CSS Zone Sandbox!

Base CSS »