CSS :hover Selector

The CSS :hover selector is used to apply styles to an element when the mouse pointer is over it. This is useful for creating interactive and responsive designs, such as changing the color, size, or other properties of elements on hover.

We can style the links for unvisited pages using the :link selector, for styling the links to visited pages, use the :visited selector & for styling the active link, use the :active selector. If the :link and :visited selectors are present in the CSS definition then in order to see the effect, we must add :hover selector after it.

Syntax:

element :hover{
    // CSS declarations;
}

Example 1: This example illustrates the changing of the background-color on hover over an element.

HTML

<!DOCTYPE html>
<html>

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

<body>
    <h1 align="center"> hover it</h1> 
</body>

</html>

Output:

Example 2: This example is showing a hidden block on hover over text.

HTML

<!DOCTYPE html>
<html>

<head>
    <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>
</head>

<body>
    <h3 align="center">
        Hover to see hidden w3wiki.
    </h3>
    <div> w3wiki </div>
</body>

</html>

Output:

Example 3: This example illustrates the changing of the font-color on hover over an element.

HTML

<!DOCTYPE html>
<html>

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

<body>
    <h1 align="center"> hover it</h1>
</body>

</html>

Output:

Example 4: This example illustrates the changing of the font-family of text on hover over it.

HTML

<!DOCTYPE html>
<html>

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

<body>
    <h1 align="center"> hover it</h1> 
</body>

</html>

Output:

Example 5: This example illustrates the changing of the text-decoration to underline on hover over an element.

HTML

<!DOCTYPE html>
<html>

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

<body>
    <h1 align="center"> hover it</h1> 
</body>

</html>

Output:

Supported Browsers:

Contact Us