web-dev-qa-db-fra.com

Comment créer un effet de survol pour les pseudo-éléments?

J'ai cette configuration:

<div id="button">Button</div>

et ceci pour 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;
}

Existe-t-il un moyen de donner au pseudo-élément un effet de survol tel que #button:before:hover {...} et est-il également possible de faire survoler le pseudo-élément en réponse à un autre élément survolé de la manière suivante: #button:hover #button:before {...}? CSS ne serait que Nice, mais jQuery aussi.

jquerycsscss3pseudo-elementpseudo-class
32
Nils_e

Vous pouvez modifier le pseudo-élément en fonction du survol du parent:

JSFiddle DEMO

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

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


#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 id="button">Button</div>

56
James Montagne

#button:hover:before changera le pseudo-élément en réponse au survol du bouton. Si vous voulez faire quelque chose qui ne soit pas trivial pour le pseudo-élément uniquement, vous feriez mieux de mettre un élément réel dans votre code HTML. Les pseudo-éléments sont plutôt limités.

Bien que CSS ne vous laisse pas attribuer de style aux éléments basés sur les éléments qui les suivent, il est généralement possible de truquer quelque chose avec le même effet de base en mettant: survolez un nœud parent,

<div id="overbutton">
    <div id="buttonbefore"></div>
    <div id="button"></div>
</div>

#overbutton {
    margin-top: 25px;
    position: relative;
}

#buttonbefore {
    position: absolute;
    background-color: blue;
    width: 25px;
    height: 25px;
    top: -25px;
}

#overbutton:hover #buttonbefore {
    // set styles that should apply to buttonbefore on button hover
}

#overbutton:hover #buttonbefore:hover {
    // unset styles that should apply on button hover
    // set styles that should apply to buttonbefore on buttonbefore hover
}
9
Brilliand

Pour clarifier, vous NE POUVEZ PAS donner :hover à un pseudo-élément. ::after:hover n'existe pas en CSS à partir de 2018.

0
Unai Yécora

Si c'est juste pour des raisons de conception, je pense qu'il est préférable de créer des pseudo-éléments de chaque côté de la boîte rectangulaire et de garder le code HTML aussi simple que possible:

HTML:

 <body>
    <div class="tabStyle">Rectangle</div>
    </body>

CSS:

 .tabStyle {
        border-style:solid;
        border-color: #D8D8D8;
        background : #D8D8D8;
        width:200px;
        height:93px;
        color: #000;
        position: relative;
        top: 10px;
        left: 49px;
        text-align:center;
    }
    .tabStyle:hover {
        background : #000;
        border-color: #000;
    }
    .tabStyle:hover::before {
        border-color: transparent #000 #000 transparent;
        border-style: solid;
        border-width: 0px 0px 100px 50px;
    }
    .tabStyle:hover::after {
        border-color: transparent transparent #000 #000;
        border-style: solid;
        border-width: 0px 50px 100px 0px;
    }
    .tabStyle::after {
        border-color: transparent transparent #D8D8D8 #D8D8D8;
        border-style: solid;
        border-width: 0px 50px 100px 0px;
        position: absolute;
        top: -4px;
        left:101%;
        content:"";
    }
    .tabStyle::before {
        border-color: transparent #D8D8D8 #D8D8D8 transparent;
        border-style: solid;
        border-width: 0px 0px 100px 50px;
        position: absolute;
        top: -4px;
        right: 101%;
        content:"";
    }

J'ai modifié le CSS et le résultat peut être vu ci-dessous: 

http://jsfiddle.net/a3ehz5vu/

0
komrad