CSS hover Pseudo-Class

The CSS hover Pseudo-Class is used to add special effects to an HTML element when the mouse pointer is brought over on that element.

Syntax:
selector:hover {
/* declarations */
}

Here is an example which shows that when your mouse enters the box area, its background color changes.

Example:
<!DOCTYPE html>
<html>

<body>
    <style type="text/css">
        .box {
            background-color: lemonchiffon;
            width: 400px;
            height: 120px;
            margin: auto;
            font-size: 30px;
            padding: 5px;
            border: 1px solid #edaf85;
            border-radius: 14px;
            text-align: center;
        }
        
        .box:hover {
            background-color: honeydew;
            border-color: #c8c8ff;
        }
    </style>

    <div class="box">
        Bring your mouse over me to change my Color
    </div>

</body>

</html>

Scroll Back to Top