Comment appliquer des effets de survol aux pseudo-éléments à l'aide de CSS ou jQuery ?

Effets de survol pour les pseudo-éléments

La requête

Nous avons la configuration HTML suivante :

<div>

Et le correspondant 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;
}

La question est : comment pouvons-nous appliquer un effet de survol au pseudo-élément en utilisant uniquement CSS ou jQuery ? De plus, le pseudo-élément peut-il réagir à un effet de survol sur un autre élément ?

La réponse

CSS uniquement :

Pour changer le pseudo-élément en fonction du survol du parent à l'aide de CSS, nous pouvons faire ce qui suit :

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!