Documentation

Student-friendly HTML, CSS, and JavaScript reference with examples

Sections


                                        :hover


                                        transform:


                                        transition:


                                        filter


                                        pointer-events

CSS Hover Pseudo-Class

The :hover pseudo-class lets you style elements when the user hovers over them with their mouse.

button {
  background-color: blue;
}

button:hover {
  background-color: darkblue;
}

When you hover over the button, it changes from blue to dark blue!

Common hover effects:

/* Change color on hover */
.link:hover {
  color: red;
}

/* Make bigger on hover */
.card:hover {
  transform: scale(1.05);
}

/* Change multiple properties */
.button:hover {
  background-color: green;
  color: white;
  cursor: pointer;
}

Hover effects make websites feel interactive and alive!