Heim >Web-Frontend >CSS-Tutorial >Wie wende ich Hover-Effekte auf Pseudoelemente an, die von einem anderen Element ausgelöst werden?

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

Patricia Arquette
Patricia ArquetteOriginal
2024-11-19 14:11:02414Durchsuche

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

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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn