javascript - 当 SCSS 中并排有多个 div 时，Outline 不会完全包裹 div

Question

我有四个 div(选项卡)，我正在尝试向选项卡添加轮廓，但轮廓并没有包裹整个 div。我认为选项卡上的边框导致了它。向 div 添加轮廓的正确方法是什么？ 代码如下:

HTML:

<div class="main-style">Random</div>
<div class="styling active1">Btn 1</div>
<div class="styling active2">Btn 2</div>
<div class="styling active3">Btn 3</div>

CSS:

.main-style,.styling {
  background-color: blue;
  color: white;
  line-height: 36px;
  float: left;
  padding: 0 20px;
  display: inline-block;
  &:hover{
    cursor: pointer;
  }
}

.styling {
    border-width: 0px 0px 0px 1px;
    border-style: solid;
 }

.over {
  outline: 3px solid orange;
}

JS:

$('.active1').addClass('over'); // the outline doesn't wrap the whole button.
//$('.active3').addClass('over'); the outline wraps the whole button

这是 JS fiddle

Answer 1

它被下一个标签隐藏了。将 position: relative 和 z-index: 1 添加到 .over 选项卡，使其显示在下一个选项卡上方:

$('.active1').addClass('over'); // the outline doesn't wrap the whole button.

.main-style,
.styling {
  background-color: blue;
  color: white;
  line-height: 36px;
  float: left;
  padding: 0 20px;
  display: inline-block;
  &:hover {
    cursor: pointer;
  }
}

.styling {
  border-width: 0px 0px 0px 1px;
}

.styling:not(:first-child) {
  margin-left: 3px;
}

.over {
  position: relative;
  z-index: 1;
  outline: 3px solid orange;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main-style">Random</div>
<div class="styling active1">Btn 1</div>
<div class="styling active2">Btn 2</div>
<div class="styling active3">Btn 3</div>