在黑色父边框设置透明背景颜色div

Question

我正在尝试创建某种具有活动和非活动元素的选择器菜单,并且根据选择哪一个,它会显示一个或另一个.

我为菜单和内容设置了边框,但是当我选择不同的菜单选项时,我想通过删除底部边框使其"连接".它看起来很好,因为我决定为此设置一个透明的背景颜色:rgba(150,150,150,0.5).父项的边框是可见的,因为所选菜单子项的背景不是实心的.

简化的html:

<div class="menu-alias fac">
  <div id="menu_fac_1" class="alias afac aliselected">
    <a style="cursor:pointer" onclick="facalias(1);" class="alias-fac-a">D</a>
  </div>
  <div id="menu_fac_0" class="alias afac ali-nuevo">
    <a style="cursor:pointer" onclick="facalias(0);" class="alias-fac-a">+</a>
  </div>
</div>

<div class="facturacion" id="fac_1" style="display: block;">
  <label for="acc_f_nombre_1" class="acc-label required">
  Nombre:<span class="required">*</span><input id="acc_f_nombre_1" value="D" type="text" class="acc-text upp">
  </label>
</div>

<div class="facturacion" id="fac_0" style="display: none;">
  <label for="acc_f_nombre_0" class="acc-label required">
  Nombre:<span class="required">*</span><input id="acc_f_nombre_0" value="" type="text" class="acc-text upp">
  </label>
</div>

和css:

.menu-alias {
  float: left;
  width: 100%;
  border-bottom: 1px solid;
  display: flex;
}
.menu-alias .alias.aliselected {
  background-color: rgba(255,100,0,0.3);
  margin-bottom: -1px;
}
.menu-alias .alias{
  float: left;
  border: 1px solid;
  border-bottom: 0;
  border-right: 0;
  background-color: rgba(255,100,0,0.1);
}
.menu-alias .alias.ali-nuevo{
  border-right:1px solid;
}
.menu-alias .alias a{
  display: block;
  padding: 5px 10px;
  cursor: pointer;
}
.facturacion{
  padding: 5px;
  background-color: rgba(255,100,0,0.3);
  border-left: 1px solid;
  border-right: 1px solid;
  border-bottom: 1px solid;
  float:left;
}

这里有一个更好理解的小提琴.我没有把jquery代码放在点击不起作用但是在我看来它是不可取的.

如果你将allectlect上的0.3透明度更改为1,你会看到它将自己置于边界上,这是我想要的,但保持透明度.

Answer 1

您可以始终将"透明"颜色设置为.menu-alias .alias.aliselected背景颜色.

.menu-alias .alias.aliselected {
   background-color:#f7caad;
   margin-bottom: -1px;
}

在这里小提琴:https://jsfiddle.net/w0mp3r/Lpcrd6jx/1/