触摸 div 容器“表”的边界相等

Question

我有一个临时表格，其中包含圆形和等边框的项目，方法是从不是第一个或最后一个的每个容器中删除底部边框。

我想要实现的是，当我悬停时，我想让整个“容器”有一个白色边框，但由于边框为零，目前这实际上是不可能的。有没有人有什么建议？我假设我必须使用 javascript 来执行此操作。

Here is what I have so far (jsfiddle)

HTML

<div id="container">
  <div class="item-container">
    1
  </div>
  <div class="item-container">
    2
  </div>
  <div class="item-container">
    3
  </div>
  <div class="item-container">
    4
  </div>
  <div class="item-container">
    5
  </div>
</div>

CSS

body { 
  background-color:#000;
 }

 #container { width:500px;}

.item-container { border:3px solid #7F7F7F;color:#7F7F7F;padding:10px;width:100%;border-bottom:0 }
.item-container:not(:first-child) { border-bottom:0; }

.item-container:hover { border:3px solid #fff;cursor:pointer;color:#fff; }

.item-container:first-child { border-top-right-radius:3px;border-top-left-radius:3px; }
.item-container:last-child { border-bottom:3px solid #7F7F7F;border-bottom-right-radius:3px;border-bottom-left-radius:3px; }

Answer 1

您可以创建不同的边框：

body {
  background-color: #000;
}

#container {
  width: 500px;
  color: #7F7F7F;
  border-radius: 3px;
  border-bottom: 3px solid;
}

.item-container {
  border: 3px solid #7F7F7F;
  border-bottom: 0;
  padding: 10px;
  position: relative;
}

.item-container:after {
  content: "";
  position: absolute;
  bottom: -3px;
  right: -3px;
  left: -3px;
  height: 3px;
  background-color: #7F7F7F;
}

#container .item-container:hover {
  border-color: #fff;
  z-index: 2;
  transition: 1s;
}

#container .item-container:hover::after {
  background-color: #fff;
  z-index: 2;
  transition: 1s;
}

<div id="container">
  <div class="item-container">
    1
  </div>
  <div class="item-container">
    2
  </div>
  <div class="item-container">
    3
  </div>
  <div class="item-container">
    4
  </div>
  <div class="item-container">
    5
  </div>
</div>