HTML Guide for hover

CSS: Unknown pseudo-element or pseudo-class “::hover”.

CSS
hover

::hover is not a valid pseudo-element; :hover is the correct pseudo-class for styling elements on mouse hover.

CSS selectors use pseudo-classes and pseudo-elements with different syntax. The :hover pseudo-class selects elements when they are being hovered over by a mouse pointer, while pseudo-elements use double colons (e.g., ::before, ::after) for selecting parts of an element. Using ::hover will cause a validation error because there is no such pseudo-element in CSS.

Incorrect CSS example:

a::hover {
  color: red;
}

Correct CSS example:

a:hover {
  color: red;
}

Minimal valid HTML document using :hover:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Hover Example</title>
  <style>
    a:hover {
      color: red;
    }
  </style>
</head>
<body>
  <a href="#">Hover over this link</a>
</body>
</html>

Use :hover instead of ::hover for correct, standards-compliant CSS.