具有边界的图标，彼此之间具有边界悬停效应

Question

我的障碍很小。我想在一行中拥有与边界相邻边框的图标，但是悬停效果会改变图标边框颜色。

当我用边框2PX固体绿色发出悬停效果时，前两个图标将以2 px向左移动。如何使悬停效应边框颜色在一个图标周围不同。

图标来自字体很棒，这里不可见。

span{
  border: 2px solid red;
  &:nth-child(1),
  &:nth-child(2) {
      border-right: none;
  }
}

<a href="#">
  <span>
    <i class="fa fa-bars" aria-hidden="true"></i>
  </span>
  <span>PL</span>
  <span id="over-menu-open">
    <i  class="fa fa-long-arrow-up " aria-hidden="true"></i>
  </span>
</a>

Answer 1

我不确定我是否正确，但是您可以尝试以下操作：

span {
  border: 2px solid red;
  & + & {
    border-left-color: transparent;
  }
}

上面的边界颜色将边框颜色设置为透明而不是删除它，因此元素不会跳跃。

Answer 2

解决方案是使用span:hover + span选择器删除下一个span的左边框。

span {
  border-top: 2px solid red;
  border-left: 2px solid red;
  border-bottom: 2px solid red;
  padding: 1px;
}
span:last-child {
  border-right: 2px solid red;
}
span:hover {
  border: 2px solid green;
}
span:hover + span {
  border-left: none;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<a href="#"><span><i class="fa fa-bars" aria-hidden="true"></i></span><span>PL</span><span id="over-menu-open"><i  class="fa fa-long-arrow-up " aria-hidden="true"></i></span></a>