如何仅使用CSS消除重叠边框

Question

我正在创建一个侧边栏菜单，我遇到了这个重叠边框问题。

HTML＆amp; CSS：

SCSS:
ul {
  list-style: none;
  width: 300px;
  margin: 0;
  padding: 0;
  background: #F9F9F9;
  li {
    position: relative;
    width: 300px;
    border-top: 1px solid transparent;
    border-bottom: 1px solid transparent;
    border-left: 1px solid transparent;
    a {
      display: block;
      padding: 5px;
    }
    span {
      display: none;
      position: absolute;
      z-index: 1;
      top: 0;
      right: 0;
    }
    &:last-child {
      border-bottom: 1px solid transparent;
    }
    &:hover {
      border-top: 1px solid #DDD;
      border-bottom: 1px solid #DDD;
      border-left: 1px solid red;
      span {
        display: block;
        background: red;
      }
    }
    &.active {
      border-top: 1px solid #DDD;
      border-bottom: 1px solid #DDD;
      background: #FFF;
    }
  }
}

HTML:
<ul>
  <li><a href="#">list one</a>  <span><a href="http://www.google.com" target="_blank">hidden</a></span>
  </li>
  <li class="active"><a href="#">list two</a>
  </li>
  <li><a href="#">list three</a>
  </li>
  <li><a href="#">list four</a>
  </li>
  <li><a href="#">list five</a>
  </li>
</ul>

的jsfiddle： https://jsfiddle.net/7xjpqf2m/

Answer 1

这很棘手，因为你有一个.active概念正在弄乱:hover概念。当一些活动就在徘徊的东西旁边时，你会得到两个边界吗？我没有玩过这个但也许这会起作用

a.active + a:hover {
  border-top-color: transparent
}
a:hover + a.active {
  border-top-color: transparent
}

这个想法有点像if语句。如果被徘徊的东西在它之前有一个活跃的兄弟，那么就不要在思考悬停时做边界（这是上面的第一条规则）。再一次，没有尝试过，它只是一个想法

Answer 2

您只需添加SASS即可：

ul＆gt; li {margin：-1px}