Können Sie Hover-Effekte auf Pseudoelemente in CSS anwenden?

Hover-Effekte für Pseudoelemente

Sie haben ein Setup mit einem übergeordneten Element (#button) und einem Pseudoelement (#button). :vor). Sie fragen sich, ob es möglich ist, Hover-Stile entweder mit reinem CSS oder mit jQuery auf das Pseudoelement anzuwenden.

Nur-CSS-Ansatz

Zur Anwendung eines Hover-Effekts auf Für das Pseudoelement selbst verwenden Sie die folgende Syntax:

#button:before:hover {
    /* Hover styles for the pseudo element */
}

Beispiel:

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

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

Hover-Effekt auf einem anderen Element

Damit das Pseudoelement auf das Schweben über einem anderen Element reagiert, verwenden Sie dieses CSS:

#element-to-hover:hover #button:before {
    /* Hover styles for the pseudo element when the other element is hovered */
}

Beispiel:

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

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

Das obige ist der detaillierte Inhalt vonKönnen Sie Hover-Effekte auf Pseudoelemente in CSS anwenden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!