CSS :hover

The CSS :hover pseudo-class is used to apply styles to an element when a user hovers over it with a pointing device (e.g., a mouse). This is commonly used to create interactive effects, such as changing the color of links, buttons, or other elements on hover.

The syntax for the :hover pseudo-class is:

</>
Copy
selector:hover {
    property: value;
}

Where:

ParameterDescription
selectorThe HTML element to which the hover effect will be applied.
propertyThe CSS property to be changed when the element is hovered.
valueThe value assigned to the CSS property during the hover state.

Examples

1. Changing Link Colors on Hover

In this example, the text color of a link (<a>) changes to red when hovered over.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        a:hover {
            color: red;
        }
    </style>
</head>
<body>
    <a href="#">Hover over this link</a>
</body>
</html>

2. Changing Button Styles on Hover

Here, the background color of a button changes to blue, and the text color changes to white when hovered over.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        button:hover {
            background-color: blue;
            color: white;
        }
    </style>
</head>
<body>
    <button>Hover me</button>
</body>
</html>

3. Scaling an Image on Hover

In this example, the size of an image increases slightly when hovered over, creating a zoom effect.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        img:hover {
            transform: scale(1.1);
            transition: transform 0.3s;
        }
    </style>
</head>
<body>
    <img src="/img/lion.jpg" alt="Example Image" width="200">
</body>
</html>

4. Changing Background Color of a Div on Hover

In this example, the background color of a <div> changes to lightblue when hovered over.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        div:hover {
            background-color: lightblue;
        }
    </style>
</head>
<body>
    <div style="width: 200px; height: 100px; border: 1px solid black;">
        Hover over me!
    </div>
</body>
</html>

5. Rotating an Icon on Hover

Here, an icon rotates 90 degrees when hovered over, creating a dynamic visual effect.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <style>
        i:hover {
            transform: rotate(90deg);
            transition: transform 0.3s;
        }
    </style>
</head>
<body>
    <i class="fas fa-arrow-right" style="font-size: 24px;"></i>
</body>
</html>

6. Changing Border Color on Hover

In this example, the border color of an input field changes to green when hovered over.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        input:hover {
            border: 2px solid green;
        }
    </style>
</head>
<body>
    <input type="text" placeholder="Hover over me">
</body>
</html>

7. Underlining Text on Hover

Here, text within a <span> is underlined when hovered over.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        span:hover {
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <span>Hover to see the underline</span>
</body>
</html>

8. Highlighting a Table Row on Hover

In this example, the background color of a table row changes to lightgray when hovered over.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        tr:hover {
            background-color: lightgray;
        }
    </style>
</head>
<body>
    <table border="1" cellpadding="10">
        <tr><td>Row 1</td></tr>
        <tr><td>Row 2</td></tr>
        <tr><td>Row 3</td></tr>
    </table>
</body>
</html>

9. Changing Font Style on Hover

Here, the font style of a heading changes to italic when hovered over.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        h2:hover {
            font-style: italic;
        }
    </style>
</head>
<body>
    <h2>Hover over this heading</h2>
</body>
</html>