CSS Hover

 CSS hover is used to enhance the user experience. We can change the appearance or the behaviour 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">Maxoncodes</p>
    <p id="p2">Developer and Founder of Maxoncodes.com</p>
</body>
</html>


Output:





    


    
Maxoncodes

    
Developer and Founder of maxoncodes.com


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