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;   
}

Pros

• Easy to use with a learn-by-doing approach
• Offers quality content
• Gamified in-browser coding experience
• The price matches the quality
• Suitable for learners ranging from beginner to advanced

Main Features

• Free certificates of completion
• Focused on data science skills
• Flexible learning timetable

GET 25% OFF

Pros

• Simplistic design (no unnecessary information)
• High-quality courses (even the free ones)
• Variety of features

Main Features

• Nanodegree programs
• Suitable for enterprises
• Paid Certificates of completion

UP TO 70% OFF

Pros

• A wide range of learning programs
• University-level courses
• Easy to navigate
• Verified certificates
• Free learning track available

Main Features

• University-level courses
• Suitable for enterprises
• Verified certificates of completion

FREE COURSES

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

Chrome

1+

Edge

12+

Firefox

1+

IE

4+

Opera

4+

Safari

2+

Mobile browser support

Chrome

18+

Firefox

4+

Opera

-

Safari

All