CSS Hover

CSS Hover is a great way to make your website interactive. When users move their mouse pointer over an element, the :hover pseudo-class lets you change its style — like changing colors, borders, or even showing/hiding content.

Syntax

				
					selector:hover {
  /* styles to apply when hovered */
}

Change Text Color on Hover

				
					<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    .tagline {
      color: #222;
      font-size: 18px;
      transition: color 0.3s ease;
    }

    .tagline:hover {
      color: #e74c3c;
    }
  </style>
</head>
<body>
  <p class="tagline">Welcome to Learn With Arshyan</p>
</body>
</html>

Explanation: The paragraph turns red when you hover your mouse over it.

Enlarge a Box on Hover

				
					<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    .box {
      width: 200px;
      padding: 20px;
      border: 2px solid #2980b9;
      text-align: center;
      transition: transform 0.2s ease;
    }

    .box:hover {
      transform: scale(1.1);
      border-color: #8e44ad;
    }
  </style>
</head>
<body>
  <div class="box">Hover to Zoom & Change Border</div>
</body>
</html>

Explanation: On hover, the box slightly zooms in and changes its border color.

Button Background Change

				
					<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    .hover-btn {
      background-color: #16a085;
      color: white;
      padding: 10px 20px;
      border: none;
      cursor: pointer;
      transition: background 0.3s ease;
    }

    .hover-btn:hover {
      background-color: #1abc9c;
    }
  </style>
</head>
<body>
  <button class="hover-btn">Hover Me</button>
</body>
</html>

Explanation: The button changes color smoothly when hovered.

Tips

Use transition for smooth animations.
Hover works only on devices with a mouse (not reliable on touchscreens).
Combine with other pseudo-classes like :focus, :active for richer effects.