CSS hover Pseudo-Class adds special effects to an HTML element when the mouse pointer is brought over on that element.
Syntax:
selector:hover {
/* declarations */
}
Here is an example of how this HTML element changes its background color when your mouse enters the area of this element.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
.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>
</head>
<body>
<div class="box"> Bring your mouse over me to change my Color </div>
</body>
</html>