CSS :hover Selector (original) (raw)

Last Updated : 12 Jun, 2026

The CSS :hover selector is a pseudo-class that applies styles to an element when the mouse pointer is placed over it.

• Applies styles when an element is hovered by the mouse.
• Commonly used with the :link selector, :visited selector, and :active selector to style links in different states.
• Provides visual feedback and improves user interaction.
• Can be used with various HTML elements such as links, buttons, and images.

**Syntax:

selector:hover {
property: value;
}

Examples of Hover Effects

Here are some practical examples to illustrate how to add hover effects using CSS.

Example 1: Changing Background Color on Hover

HTML `

<style>
h1:hover {
    color: white;
    background-color: green;
}
</style>

hover it

`

**Output:

Example 2: Revealing a Hidden Block on Hover

HTML `

<style>
ul {
    display: none;
}

div {
    background: green;
    width: 200px;
    height: 200px;
    padding: 20px;
    padding-left: 50px;
    font-size: 30px;
    color: white;
    display: none;
}

h3:hover + div {
    display: block;
}
</style>

Hover to see hidden GeeksforGeeks.

`

**Output:

Example 3: Changing Font Color on Hover

HTML `

<style>
h1:hover {
    color: red;
}
</style>

hover it

`

**Output:

Example 4: Changing Font Family on Hover

HTML `

<style>
h1:hover {
    font-family: monospace;
}
</style>

hover it

`

**Output:

Example 5: Adding Underline on Hover

HTML `

<style>
h1:hover {
    text-decoration: underline;
}
</style>

hover it

`

**Output: