CSS Hover | CSS Tutorial

CSS hover is used to enhance the user experience. We can change the appearance or the behavior of the HTML element(s) when the user hovers over it.

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:

This is one example of using CSS hover; you can try many other things too.