CSS六角鏈接懸停

Question

嘗試使用css實現六邊形ul列表並且遇到懸停狀態問題。 目前當只懸停邊框左右變色時，我需要各方面。 我認為這個問題存在於課前的懸停中，但嘗試這個並不奏效。 謝謝。

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

小提琴是： https ： //jsfiddle.net/91jeee5m/

Answer 1

你有正確的方法，只需要做同樣的事情:before和:after ：像這樣的狀態：

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

在這里看到它

Answer 2

您需要在：before和：after偽元素上設置邊框顏色：

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

Answer 3

這是簡單的六邊形分頁

 * { 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>