Wie wende ich Hover-Effekte mit CSS oder jQuery auf Pseudoelemente an?

Hover-Effekte für Pseudoelemente

Die Abfrage

Wir haben das folgende HTML-Setup:

<div>

Und das entsprechende 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;
}

Die Frage ist, wie können wir einen Hover-Effekt auf das Pseudoelement anwenden, indem wir nur CSS oder jQuery verwenden? Kann das Pseudoelement außerdem auf einen Hover-Effekt auf ein anderes Element reagieren?

Die Antwort

Nur ​​CSS:

Um das Pseudoelement zu ändern Basierend auf dem Hover des übergeordneten Elements mithilfe von CSS können wir Folgendes tun:

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

Das obige ist der detaillierte Inhalt vonWie wende ich Hover-Effekte mit CSS oder jQuery auf Pseudoelemente an?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!