X

Headline

This is an important message requiring you to make a choice if you're based in the EU.

CSS :hover Pseudo Class

The :hover pseudo-class selects and styles the hovered element. It is covered by the user.

The elements have hovered when the user moves the mouse over the element. It does not activate the pointing device.

:link, :active, or :visited pseudo-classes override the style defined by the :hover pseudo-class.

Many touch devices do not support :hover because it has some problems with matching.

Version

CSS1

Syntax

:hover {
css declarations;
}

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      a:hover {
      background-color: #8ebf42;
      color: #666;
      }
    </style>
  </head>
  <body>
    <h2>:hover selector example</h2>
    <a href="https://www.w3docs.com/">W3docs.com</a>
  </body>
</html>

Hover over the links to see how the color changes:

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      a {
      color: #1c87c9;
      }
      a:hover {
      background-color: #8ebf42;
      color: #eee;
      }
    </style>
  </head>
  <body>
    <h2>:hover selector example</h2>
    <p>Lorem Ipsum is simply dummy text of the printing and <a href="#">typesetting</a> industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into <a href="#">electronic</a> typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like <a href="#">Aldus PageMaker</a> including versions of Lorem Ipsum.</p>
  </body>
</html>

Another example with the :hover pseudo-class:

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
      padding: 30px;
      background-color: #8ebf42;
      color:#eee;
      }
      div:hover {
      background-color: #666;
      color: #fff;
      }
    </style>
  </head>
  <body>
    <h2>:hover selector example</h2>
    <div>
      Lorem ipsum is simply dummy text...
    </div>
  </body>
</html>

Browser support

4.0+ 12.0+ 2.0+ 3.1+ 10.0+

Practice Your Knowledge

Which statement is correct about :hover pseudo class?



Do you find this helpful?

Related articles