CSS Hover | CSS Tutorial

The :hover pseudo-class in CSS is used to enhance user experience. It allows you to change the appearance or behavior of an HTML element when the user moves their mouse over it.

This makes your webpage feel more interactive and dynamic.

Syntax:

selector:hover {
    /* CSS rule(s) */;
}

Example:

<html lang="en">
<head>
    <style>
        #p1 {
            color: yellow;
        }
        #p1:hover {
            color: red;
        }
 
        #p2 {
            border: 2px solid red;
        }
        #p2:hover {
            border: 5px solid purple;
        }
    </style>
</head>
<body>
    <p id="p1">CodeWithHarry</p>
    <p id="p2">Developer and Founder of CodeWithHarry.com</p>
</body>
</html>

Output:

The first paragraph changes text color from yellow to red on hover.
The second paragraph changes its border thickness and color when hovered.

Hover effects are widely used in buttons, links, menus, and interactive sections of a website. Try experimenting with them to bring your designs to life!