By using this site you agree to the use of cookies by Brugbart and our partners.

Learn more

The CSS Hover Selector

The Hover Pseudo-class is used to select elements when they are hovered.

Edited: 2012-10-06 07:47

The CSS :Hover selector can be used to select elements that are hovered – for example, a user hovering a link with the mouse – but it can also be used on non-link elements.

Adding a hover effect to links on a page, can improve usability – but it depends on a lot of things, such as the number of links on the page, and overall contrast of the design. It should be noted that :hover works on other elements besides links.

:Hover is a member of the pseudo-classes of CSS.

Using Hover on Links

:Hover is commonly used on links, together with :visited :link and :active. How this can be done is shown below:

a:link { color: blue; }
a:visited { color: purple; }
a:active { color: yellow; }
a:hover { color: red; }

Using Hover on Other Elements

Many people do not realize that :Hover can be used on other elements. The below is a full HTML and CSS code example, and it shows exactly how to add a hover effect to a div element with an id of "MyID":

<!DOCTYPE html>
<html lang="en-US">

    <title>Adding Hover Effects to Elements</title>
    <style type="text/css">
    #MyID {width:100px;height:200px;background:#9E9E9E;}
    #MyID:hover {background:#FF0000;}

   <div id="MyID">


Show Example