Wie wende ich Hover-Effekte auf Pseudoelemente an, die von einem anderen Element ausgelöst werden?

Hover-Effekt zu Pseudoelementen hinzufügen

Frage:

Wie kann man einen Hover-Effekt auf ein Pseudoelement implementieren? B. #element:before:hover, und sorgen Sie dafür, dass der Hover ausgelöst wird, indem Sie mit der Maus über ein anderes Element fahren, z. B. #button:hover #element:before {...}?

Nur ​​CSS-Methode:

Ja, es ist möglich, dies rein mit CSS zu erreichen:

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

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

jQuery-Methode:

Wenn Sie jQuery bevorzugen, finden Sie hier eine Lösung:

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

Das obige ist der detaillierte Inhalt vonWie wende ich Hover-Effekte auf Pseudoelemente an, die von einem anderen Element ausgelöst werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!