CSS :hover Pseudo Class

CSS :hover Pseudo-Class

The :hover pseudo-class applies styles when a user moves their mouse pointer over an element. It's commonly used for buttons, links, images, and interactive UI elements to enhance user experience.

1. Syntax

selector:hover {
  /* CSS styles here */
}

Example:

button:hover {
  background-color: blue;
  color: white;
}

✅ When a user hovers over the button, it turns blue with white text.

2. Example – Hover Effect on a Button

<button>Hover Me</button>

button {
  padding: 10px 20px;
  background-color: gray;
  color: white;
  border: none;
  cursor: pointer;
}

button:hover {
  background-color: green;
}

✅ The button turns green when hovered.

3. Example – Hover Effect on a Link

<a href="#">Hover Over Me</a>

a {
  text-decoration: none;
  color: black;
}

a:hover {
  color: red;
  text-decoration: underline;
}

✅ The link turns red and gets an underline on hover.

4. Example – Hover Effect on an Image

<img src="example.jpg" alt="Hover Image">

img:hover {
  opacity: 0.7;
}

✅ The image becomes slightly transparent when it is hovered.

5. Example – Creating a Smooth Hover Transition

button {
  background-color: black;
  color: white;
  transition: background-color 0.3s ease;
}

button:hover {
  background-color: red;
}

✅ The button smoothly transitions from black to red when hovered.

6. Hover Effect on a div (Card Hover Effect)

<div class="card">Hover Me</div>

.card {
  width: 200px;
  height: 100px;
  background-color: lightgray;
  text-align: center;
  line-height: 100px;
  transition: transform 0.3s ease-in-out;
}

.card:hover {
  transform: scale(1.1);
}

✅ The card grows slightly when hovered.

7. Difference Between :hover and :focus

Selector	When it Applies
:hover	When the mouse is hovering over the element.
:focus	When the element is focused (clicked, tabbed, or activated by a keyboard).

8. Browser Support

✅ Fully supported in Chrome, Edge, Firefox, Safari, and Opera.
⚠ Not available on touch devices (some browsers may simulate hover on first tap).

9. Best Practices

✔ Use :hover for buttons, links, images, and UI elements.
✔ Add transition for smooth effects.
✔ Avoid critical UI features that depend only on hover, as it doesn’t work on touch devices.