CSS :hover Pseudo-class

Definition and Usage

CSS :hover Pseudo-classes are used to select elements on mouse hover.

Tip::hover Pseudo-classes can be used for all elements, not just links.

Tip:Please use :link Set the style of unvisited pages, using :visited Set the style of links on visited pages, using :active Set the style of active links.

Note:In CSS definitions,:hover must be placed in :link and :visited!(if it exists) before it takes effect!

Instance

Example 1

Select and set the style of links on mouse hover:

a:hover {
  background-color: yellow;
  font-size: 18px;
}

Try it yourself

Example 2

Select and set the style of <p>, <h1>, and <a> elements on mouse hover:

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

Try it yourself

Example 3

Select and set the styles for unvisited, visited, hovered, and active links:

/* Unvisited link */
a:link {
  color: green;
}
/* Visited link */
a:visited {
  color: green;
}
/* Hovered link */
a:hover {
  color: red;
}
/* Active link */
a:active {
  color: yellow;
}

Try it yourself

Example 4

Set different styles for links:

a.ex1:hover, a.ex1:active {
  color: red;
}
a.ex2:hover, a.ex2:active {
  font-size: 150%;
}

Try it yourself

Example 5

Hover over the <span> element to display the <div> element (similar to a tooltip):

div {
  display: none;
}
span:hover + div {
  display: block;
}

Try it yourself

Example 6

Show and hide the 'dropdown' menu on mouse hover:

ul {
  display: inline;
  margin: 0;
  padding: 0;
}
ul li {display: inline-block;}
ul li:hover {background: #555;}
ul li:hover ul {display: block;}
ul li ul {
  position: absolute;
  width: 200px;
  display: none;
}
ul li ul li {
  background: #555;
  display: block;
}
ul li ul li a {display:block !important;}
ul li ul li:hover {background: #666;}

Try it yourself

CSS Syntax

:hover {
  css declarations;
}

Technical details

Browser support

The numbers in the table indicate the first browser version to fully support the pseudo-class.

Related pages

Tutorial:CSS Links

Tutorial:CSS Pseudo-classes