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

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

Patricia Arquette

Libérer： 2024-11-12 07:15:02

original

1042 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!