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 */
}

Example:

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

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

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 */
}

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;
}

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!