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

See it here

Answer 2

您还需要在：before和：after伪元素上设置边框颜色：

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

Answer 3

这是简单的六边形分页

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;