How to Apply Hover Effects to Pseudo Elements Using CSS or jQuery?

Hover Effects for Pseudo Elements

The Query

We have the following HTML setup:

<div>

And the corresponding CSS:

#button {
    color: #fff;
    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;
}

The question is, how can we apply a hover effect to the pseudo element using CSS only or jQuery? Additionally, can the pseudo element react to a hover effect on another element?

The Answer

CSS Only:

To change the pseudo-element based on the hover of the parent using CSS, we can do the following:

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

JQuery:

$("#button").hover(function() {
    $(this).find(":before").css("background-color", "red");
}, function() {
    $(this).find(":before").css("background-color", "blue");
});

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