Comment appliquer des effets de survol à des pseudo-éléments déclenchés par un autre élément ?-tutoriel CSS-php.cn

Comment appliquer des effets de survol à des pseudo-éléments déclenchés par un autre élément ?

Patricia Arquette

Libérer： 2024-11-19 14:11:02

original

368 Les gens l'ont consulté

How to Apply Hover Effects to Pseudo Elements Triggered by Another Element?

Ajout d'un effet de survol aux pseudo-éléments

Question :

Comment peut-on implémenter un effet de survol sur un pseudo-élément, tel que #element:before:hover, et déclenchez ce survol en survolant un autre élément, comme #button:hover #element:before {...}?

Méthode CSS uniquement :

Oui, il est possible d'y parvenir uniquement avec CSS :

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

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

Copier après la connexion

Méthode jQuery :

Si vous préférez jQuery, voici un solution :

<div class="snippet" data-lang="js" data-hide="true">
<div class="snippet-code snippet-currently-hidden">
<pre class="snippet-code-css lang-css prettyprint-override">#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;}

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

<div>

Copier après la connexion

$(function() {
    $("#button").hover(
        function () {
            $(this).find(":before").css("background-color", "red");
        },
        function () {
            $(this).find(":before").css("background-color", "blue");
        }
    );
});

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!