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

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.

<!DOCTYPE html>

    <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;

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