0
0
CSSmarkup~5 mins

Hover state in CSS

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

The hover state lets you change how something looks when you move your mouse over it. It helps users know what they can click or interact with.

To highlight buttons when a user points at them with the mouse.
To show extra information or effects on links when hovered.
To change colors or styles of menu items when the mouse is over them.
To make images or cards react visually when hovered for better engagement.
To improve user experience by giving clear feedback on interactive elements.
Syntax
CSS
selector:hover {
  property: value;
}

The :hover is a CSS pseudo-class that applies styles when the mouse is over the element.

You can use it on buttons, links, images, or any visible element.

Examples
Changes the button's background color to light blue when hovered.
CSS
button:hover {
  background-color: lightblue;
}
Underlines the link and changes its color to red on hover.
CSS
a:hover {
  text-decoration: underline;
  color: red;
}
Adds a shadow around a card element when hovered to make it stand out.
CSS
.card:hover {
  box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}
Sample Program

This page shows a green button that changes to a darker green when you move your mouse over it. The change is smooth because of the transition.

CSS
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Hover State Example</title>
  <style>
    button {
      background-color: #4CAF50;
      color: white;
      padding: 1rem 2rem;
      border: none;
      border-radius: 0.5rem;
      font-size: 1.25rem;
      cursor: pointer;
      transition: background-color 0.3s ease;
    }
    button:hover {
      background-color: #45a049;
    }
  </style>
</head>
<body>
  <main>
    <button aria-label="Submit form">Submit</button>
  </main>
</body>
</html>
OutputSuccess
Important Notes

Hover effects do not work on touch screens the same way because there is no mouse pointer.

Use transition to make hover changes smooth and pleasant.

Always ensure good color contrast for accessibility when changing colors on hover.

Summary

The :hover pseudo-class changes styles when the mouse is over an element.

It helps users see what is clickable or interactive.

Use smooth transitions and good contrast for better user experience.