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>
<p>And the corresponding CSS:</p>
<pre class="brush:php;toolbar:false">#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");
});