Can you Apply Hover Effects to Pseudo Elements in CSS?-CSS Tutorial-php.cn

Can you Apply Hover Effects to Pseudo Elements in CSS?

Patricia Arquette

Release： 2024-11-12 07:15:02

Original

1043 people have browsed it

Can you Apply Hover Effects to Pseudo Elements in CSS?

Hover Effects for Pseudo Elements

You've got a setup with a parent element (#button) and a pseudo element (#button:before). You're wondering if it's possible to apply hover styles to the pseudo element using either pure CSS or jQuery.

CSS-Only Approach

To apply a hover effect to the pseudo element itself, use the following syntax:

#button:before:hover {
    /* Hover styles for the pseudo element */
}

Copy after login

Example:

#button:before {
    background-color: blue;
    content: "";
    display: block;
    height: 25px;
    width: 25px;
}

#button:before:hover {
    background-color: red;
}

Copy after login

Hover Effect on Another Element

To make the pseudo element respond to hover on another element, use this CSS:

#element-to-hover:hover #button:before {
    /* Hover styles for the pseudo element when the other element is hovered */
}

Copy after login

Example:

#button {
    display: block;
    height: 25px;
    margin: 0 10px;
    padding: 10px;
    text-indent: 20px;
    width: 12%;
}

#button:before {
    background-color: blue;
    content: "";
    display: block;
    height: 25px;
    width: 25px;
}

#parent-element:hover #button:before {
    background-color: red;
}

Copy after login

The above is the detailed content of Can you Apply Hover Effects to Pseudo Elements in CSS?. For more information, please follow other related articles on the PHP Chinese website!