CSS :hover pseudo-class – Restyle on mouse over

The :hover pseudo-class lets you change the style when the mouse is hovering over the element.

Example

<style>
	.btn {
        ...
	}

    .btn.gray {
        ...
    }

    .btn:hover {
        background-color: #3cb0fd;
        cursor: pointer;
    }

    .btn.gray:hover {
        background-color: #8c8c8c;
    }
</style>

<input type="button" class="btn" value="Button 1">
<input type="button" class="btn gray" value="Button 2">

Result

• Try moving your mouse over each of the buttons to see the new effect.

.btn:hover selector (Line 10)

Create a new style rule that allows us to style the btn class differently when the mouse is hovering over it. All you do is add ":hover" to the end of what you want to style.

cursor property (Line 12)

Change the mouse cursor to the pointer icon, which makes the button appear clickable (like a regular link).

:hover is called a pseudo class

There are also other pseudo classes, such as :visited, which allows you to change the color of visited links.

Practice in Editor