🚨 Time is Running Out: Reserve Your Spot in the Lucky Draw & Claim Rewards! START NOW

Code has been added to clipboard!

CSS :Hover Selector

Reading time 2 min
Published Sep 8, 2017
Updated Oct 10, 2019

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:

Example
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
Example
p:hover, h1:hover, a:hover {
    background-color: yellow;   
}

DataCamp
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
Udacity
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
edX
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

CSS :hover and other pseudo classes

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

Example
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:

Example
/* 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:

Example
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:

Example
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

Browser image
Chrome
1+
Browser image
Edge
12+
Browser image
Firefox
1+
Browser image
IE
4+
Browser image
Opera
4+
Browser image
Safari
2+

Mobile browser support

Browser image
Chrome
18+
Browser image
Firefox
4+
Browser image
Opera
-
Browser image
Safari
All