Maison > interface Web > tutoriel CSS > Pouvez-vous appliquer des effets de survol aux pseudo-éléments en CSS ?

Pouvez-vous appliquer des effets de survol aux pseudo-éléments en CSS ?

Patricia Arquette
Libérer: 2024-11-12 07:15:02
original
1076 Les gens l'ont consulté

Can you Apply Hover Effects to Pseudo Elements in CSS?

Effets de survol pour les pseudo-éléments

Vous avez une configuration avec un élément parent (#button) et un pseudo-élément (#button :avant). Vous vous demandez s'il est possible d'appliquer des styles de survol au pseudo-élément en utilisant du CSS pur ou jQuery.

Approche CSS uniquement

Pour appliquer un effet de survol à le pseudo-élément lui-même, utilisez la syntaxe suivante :

#button:before:hover {
    /* Hover styles for the pseudo element */
}
Copier après la connexion

Exemple :

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

#button:before:hover {
    background-color: red;
}
Copier après la connexion

Effet de survol sur un autre élément

Pour faire répondre le pseudo-élément au survol d'un autre élément, utilisez ce CSS :

#element-to-hover:hover #button:before {
    /* Hover styles for the pseudo element when the other element is hovered */
}
Copier après la connexion

Exemple :

#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;
}
Copier après la connexion

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!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal