Comment puis-je ajouter des effets de survol aux pseudo-éléments en CSS ?

Effets de survol pour les pseudo-éléments

Problème : ajout d'effets de survol aux pseudo-éléments

Lors de l'utilisation de pseudo-éléments en HTML et CSS, il est souvent souhaitable de ajoutez des effets de survol pour améliorer l’interactivité de l’utilisateur. Cependant, créer des effets de survol directement pour les pseudo-éléments peut être difficile.

Solution : effets de survol via l'élément parent

Vous pouvez obtenir des effets de survol pour un pseudo-élément en ciblant l'élément parent à la place. Voici comment procéder :

#button:before {
    /* Pseudo element styles */
}

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

Dans ce code, #button:before définit les styles initiaux du pseudo-élément, tandis que #button:hover:before spécifie les styles d'effet de survol. Lorsque l'élément parent (#button) est survolé, l'effet de survol sera appliqué au pseudo-élément.

Exemple de code

Considérez la configuration HTML suivante :

<div>

Et le CSS correspondant :

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

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

Ce code affichera un bouton avec un carré bleu devant son texte. Lorsque vous survolez le bouton, le carré deviendra rouge.

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!