Question

使用css删除所选框的左右边框而不使用javascript可能吗？最少2个盒子，最多5个或更多盒子

例如

;

我有2个盒子。只有第一个框有右边框。我想要做; 无论选择还是悬停，边框都必须消失。看我的图片example image

Answer 1

您可以使用悬停框的边框。想法是当你将鼠标悬停在任何一个盒子上时，你会这样做：

左边框颜色设置与背景颜色相同：border-left: 1px solid orange;
将负左边距设置为等于边框宽度，这使得框架向左移动超过上一个元素并隐藏上一个边框：margin-left: -1px;
要防止所有下一个框显着移位，您需要将活动框宽度增加到其宽度+边框宽度：width: calc(20% + 1px);
如果在框内设置了填充，则需要将边框宽度添加到左边填充值。

这是一个解决方案（建议使用border-right width = 1px）：

.cont {
  width: 100%;
  height: 100px;
}
.box {
  width: 20%;
  height: 100px;
  float: left;
  background: orange;
  display: inline-block;
  box-sizing: border-box;
}
.box:not(:last-child) {
  border-right: 1px solid black;
}
.box:not(:first-child):hover {
  border-left: 1px solid orange;
  box-sizing: padding-box;
  margin-left: -1px;
  width: calc(20% + 1px);
}
.box:hover {
  background: lightblue;
  border-right: 1px solid lightblue;
}

<div class="cont">
<div class="box">box1</div>
<div class="box">box2</div>
<div class="box">box3</div>
<div class="box">box4</div>
<div class="box">box5</div>
</div>

删除所选框的右边框和左边框

1 个答案: