:hover Back

• :hover is a pseudo-class used to select and style an element when it is being hovered by the user.
• An element is hovered over when the user designates it with a pointing device, like pointing at it by placing the mouse over it, without necessarily activating it.
• :hover is a dynamic pseudo-class that matches when an element is being hovered by the user. It is usually used to give users visual feedback that the element they're pointing at has been indeed hovered and may be activated.

Case 1: hover actions for links

<a href="#">links</a>

a:hover {
    background-color: #a10000;
    color: #fff;
}

Case 2: dropdown menu

See the Pen jWGXGX by aleen42 (@aleen42) on CodePen.

Case 3: transformation

See the Pen BjwvmV by aleen42 (@aleen42) on CodePen.

See the Pen rxGoGB by aleen42 (@aleen42) on CodePen.

Note

• Most touch devices don't support hover interactions. Using :hover on touch devices can cause problems like unexpected effects and interactions.
• It is recommended that suitable fallback is provided for touch devices to make sure that all content is available for users on devices that don't offer :hover interactions.
• The :hover styles may be overridden by link, visited, and focus when applying styles.