How to Apply Hover Effects to Pseudo Elements Triggered by Another Element?

Adding Hover Effect to Pseudo Elements

Question:

How can one implement a hover effect on a pseudo element, such as #element:before:hover, and make that hover triggered by hovering over another element, like #button:hover #element:before {...}?

CSS Only Method:

Yes, it's possible to achieve this purely with CSS:

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

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

jQuery Method:

If you prefer jQuery, here's a solution:

<div class="snippet" data-lang="js" data-hide="true">
<div class="snippet-code snippet-currently-hidden">
<pre class="snippet-code-css lang-css prettyprint-override">#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;}

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

<div>

$(function() {
    $("#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 Triggered by Another Element?. For more information, please follow other related articles on the PHP Chinese website!