CSS-Sechseck-Link-Hover

Question

Der Versuch, eine Hex-ul-Liste mit CSS zu implementieren und Probleme mit dem Hover-Status. Derzeit, wenn nur die Grenze links und rechts schwebte Farbe wechseln, brauche ich alle Seiten. Ich denke, das Problem liegt irgendwo in der Luft vor dem Unterricht, aber es funktioniert nicht. Vielen Dank.

ul.pagination li { 
display: inline-block; 
position: relative; 
width: 30px; 
height: 17.32px; 
margin: 12px 8px; 
border-left: solid 2px #d7d7d7; 
border-right: solid 2px #d7d7d7; 
cursor: pointer; 
} 
ul.pagination li:before { 
top: -10.61px; 
border-top: solid 2.83px #d7d7d7; 
border-right: solid 2.83px #d7d7d7; 
} 
ul.pagination li:after, ul.pagination li:before { 
content: ""; 
position: absolute; 
width: 21.21px; 
height: 21.21px; 
-webkit-transform: scaleY(.5774) rotate(-45deg); 
transform: scaleY(.5774) rotate(-45deg); 
background-color: inherit; 
left: 2.39px; 
} 

Fiddle ist: https://jsfiddle.net/91jeee5m/

Answer 1

Sie den richtigen Weg haben zu tun, tun nur das gleiche mit :before und :after Zustand wie folgt aus:

ul.pagination li:hover:after { 
    border-left: solid 2px #00A2C6; 
    border-bottom: solid 2px #00A2C6; 
} 
ul.pagination li:hover:before { 
    border-top: solid 2px #00A2C6; 
    border-right: solid 2px #00A2C6; 
} 

See it here

Answer 2

Sie müssen die Rahmenfarbe auf Ihrem einzustellen: before und: after Pseudo-Elemente als auch:

ul.pagination li:hover, 
ul.pagination li:hover:before, 
ul.pagination li:hover:after { 
    border-color: #00A2C6; 
} 

Answer 3

Hier einfachen Sechseck Paginierung

* { 
 
    box-sizing: border-box 
 
} 
 
body { 
 
    text-align: center 
 
} 
 

 
#hexagon, 
 
#hexagon li { 
 
    position: relative 
 
} 
 
#hexagon{ 
 
    margin-top: 40px ; 
 
} 
 
#hexagon li { 
 
    position: relative; 
 
    display: block; 
 
    width: 54px; 
 
    height: 30px; 
 
    float: left; 
 
    margin-right: 30px; 
 
    list-style-type:none; 
 
} 
 
#hexagon li, 
 
#hexagon li:before, 
 
#hexagon li:after{ 
 
    border-left: 4px solid red; 
 
    border-right: 4px solid red; 
 
    transition: all .6s; 
 
    backface-visibility:hidden; 
 
} 
 
#hexagon li:before, 
 
#hexagon li:after { 
 
    content: ""; 
 
    position: absolute; 
 
    width: 46px; 
 
    height: 30px; 
 
    transform-origin: center center 0px; 
 
} 
 
#hexagon li:before { 
 
    transform: rotate(-60deg); 
 
    left: -4px; 
 
    bottom: 0px; 
 
} 
 
#hexagon li:after { 
 
    transform: rotate(60deg); 
 
    left: -4px; 
 
    bottom: 0px; 
 
} 
 

 
#hexagon li:hover,#hexagon li:hover:before,#hexagon li:hover:after { 
 
    border-left: 4px solid green; 
 
    border-right: 4px solid green; 
 
    cursor:pointer 
 
}

<ul id=hexagon class=pagination> 
 
    <li><a href="#">1</a> 
 
    </li> 
 
    <li><a href="#">2</a> 
 
    </li> 
 
    <li><a href="#">3</a> 
 
    </li> 
 
    <li><a href="#">...</a> 
 
    </li> 
 
</ul>