Wie schreibe ich Hover-Eigenschaft mit CSS für ein Stück mit: nach und: vor Eigenschaften?

Question

Ich habe ein Sechseck mit nach und vor Eigenschaften mit CSS gemacht, jetzt versuche ich ein Glühen um das Sechseck beim Schweben zu erzeugen, funktioniert perfekt für die Mitte des Stückes, aber nicht für die Punkte des Sechsecks (oben und unten Stücke) mit: nach und: vor.

.hexagon1 { 
 
    position: absolute; 
 
    left: 50%; 
 
    transform: translate(-50%); 
 
    width: 106px; 
 
    height: 61.20px; 
 
    background-color: #02cd68; 
 
    margin: 30.60px 0; 
 
    top:44px; 
 
    cursor: pointer; 
 
    transition: box-shadow 0.2s ease-in-out; 
 
} 
 

 
.hexagon1:hover { 
 
    box-shadow: 0px 0px 40px #02cd68; 
 
} 
 

 
.hexagon1:before, 
 
.hexagon1:after { 
 
    content: ""; 
 
    position: absolute; 
 
    width: 0; 
 
    border-left: 53px solid transparent; 
 
    border-right: 53px solid transparent; 
 
} 
 

 
.hexagon1:before { 
 
    bottom: 100%; 
 
    border-bottom: 30.60px solid #02cd68; 
 
    transition: box-shadow 0.2s ease-in-out; 
 
} 
 

 
.hexagon1:after { 
 
    top: 100%; 
 
    width: 0; 
 
    border-top: 30.60px solid #02cd68; 
 
    transition: box-shadow 0.2s ease-in-out; 
 
}

<div class="hexagon1"></div>

Ich habe mit .hexagon1 versucht: nach: Hover, aber es gibt kein Ergebnis :(jede Anregung dank

Answer 1

Kombinieren after, before und hover wie der folgende Code?! :

.hexagon1:hover:before { 
//... 
} 

.hexagon1:hover:after { 
//... 
} 

Aber Ihre Frage ist ein bisschen anders I ha. Ich habe im Internet gesucht, aber ich konnte keine richtige Lösung finden. Hier ist meine Lösung:

• Erstellen Sie zwei Hexagone (Man sollte als eine andere größer sein gesehen als Schatten werden)
• um sie von z-index mit
• Sie das Sechseck nicht zeigen, die auf der Rückseite ist bis die Front auf schweben ist

Hier ist der Link: https://jsfiddle.net/7nn5v06z/