CSS :Hover Selector

The CSS :hover selector defined

The :hover selector in CSS is actually a pseudo-class. Using :hover, you can define how a particular element is styled when the user hovers their cursor over it without actually clicking on it:

h1:hover {
    background-color: blue;
}

The syntax for :hover in CSS

The syntax requirements for the :hover selector are as follows:

selector:hover {style}

The selector can be defined in three ways:

• using the name of the element
• using the ID of the element
• using a certain class

p:hover, h1:hover, a:hover {
    background-color: yellow;   
}

CSS :hover and other pseudo classes

It's rather common to use hover effects in CSS for styling links:

a.link1:hover, 
a.link1:active {
    color: green;
}   
a.link2:hover, 
a.link2:active {
    font-size: 120%;
}

To do that, you might use :hover with other pseudo-classes. The :link selector is for links that are unvisited, :visited is used for the visited pages, and :active is used for the link that is currently active.

To style the links properly, you must keep in mind that :link, :visited, :hover and :active pseudo-classes must be used in exactly this order:

/* unvisited link */
a:link {
    color: green;
}

/* visited link */
a:visited {
    color: green;
}

/* mouse over link */
a:hover {
    color: red;
}

/* selected link */
a:active {
    color: yellow;
}

You can also add a link to only be displayed when the user hovers over the selected element:

a {
 display: none;
} 
span:hover + a { /* Link is shown only then you hover over span element */
 display: block;
}

A more complex :hover example

To better understand what CSS hover effects are available, see a bit more complicated example below. As you hover the cursor over the element, a dropdown menu will appear. Then, as you hover on its options, they will be highlighted:

div {background-color: blue;}
div a {
 text-decoration: none;
 color: white;
 font-size: 20px;
 padding: 15px;
 display: inline-block;
}
ul {
 display: inline;
}
ul li {
 display: inline-block;
}
ul li:hover {
 background: blue;
}
ul li:hover ul {
 display: block;
}
ul li ul {
 position: absolute;
 width: 150px;
 display: none;
}
ul li ul li {
 display: block; 
 background: blue;
}
ul li ul li a {
 display: block !important;
}
ul li ul li:hover {
 background: lightblue;
}

Note: using the CSS :hover selector can cause issues for the users of touch screens, as touching an element is usually interpreted as clicking straightaway.

Browser support

Mobile browser support