webentwicklung-frage-antwort-db.com.de

Wie macht man einen Hover-Effekt für Pseudo-Elemente?

Ich habe ein solches Setup:

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

und das für 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;
}

Gibt es eine Möglichkeit, dem Pseudo-Element einen Hover-Effekt wie #button:before:hover {...} zu geben, und ist es auch möglich, das Pseudo-Element als Reaktion auf ein anderes Element wie folgt zu schweben: #button:hover #button:before {...}? CSS wäre nur Nizza, aber auch jQuery ist in Ordnung.

32
Nils_e

Sie können das Pseudoelement basierend auf dem Hover des übergeordneten Elements ändern:

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 ändert das Pseudoelement als Reaktion auf den Hover der Schaltfläche. Wenn Sie jedoch nur etwas außerhalb des Pseudoelements anstellen möchten, sollten Sie besser ein tatsächliches Element in Ihren HTML-Code einfügen. Pseudoelemente sind eher begrenzt.

Während Sie mit CSS keine Elemente basierend auf Elementen gestalten können, die auf sie folgen, ist es normalerweise möglich, etwas mit demselben Grundeffekt zu manipulieren, indem Sie: hover auf einen übergeordneten Knoten setzen, d. H .:

<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

Zur Verdeutlichung können Sie KANN NICHT einem Pseudoelement :hover geben. Seit 2018 gibt es in CSS kein ::after:hover.

0
Unai Yécora

Wenn es nur zu Designzwecken ist, denke ich, ist es besser, Pseudo-Elemente auf beiden Seiten der Rechteckbox zu erstellen und den HTML-Code so einfach wie möglich zu halten:

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:"";
    }

Ich habe das CSS geändert und das Ergebnis ist unten zu sehen: 

http://jsfiddle.net/a3ehz5vu/

0
komrad