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>

带边框的图标，彼此旁边有边框悬停效果

2 个答案: