Question

我有一个临时的物品表，这些物品是圆形的，边界相等，方法是从第一个或最后一个容器中移除底部边框。

我想要实现的目标，就是当我徘徊时，我想拥有整个＆＃34;容器＆＃34;有一个白色的边框，但由于零边框，目前不太可能。有没有人有什么建议？我假设我必须使用javascript执行此操作。

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

您可以采用不同的方式创建边框：

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

触摸div容器的平等边界＆＃34; table＆＃34;

1 个答案: