CSS :hover Pseudo Class

❮ Prev Next ❯

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

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

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

Selectors Level 3

Selectors Level 4

Syntax

:hover {
  css declarations;
}

Example of the :hover pseudo-class:

<!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>

Try it Yourself »

Hover over the links to see how the color changes.

Example of the :hover pseudo-class with the <a> tag:

<!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>

Try it Yourself »

Example of the :hover pseudo-class with the <div> tag:

<!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>