行边框 - 顶部边框 - 底部悬停单行？

Question

首先，我是新的所以不要给我一个艰难的时间;）

我的foreach造型有问题。我想要的是，如果我将鼠标悬停在行上。它只返回单行底部和顶部边框。 在这种情况下，当我将鼠标悬停在下一行时，其他行的底部顶部边框会创建一个2px边框。我尝试过很多优势：-1px等...有些人给了我更好的结果但不是最后的结果。

.frameregels{
border-bottom:1px solid #e1e1e1;
border-top:1px solid #e1e1e1;       
}
.frameregels:nth-child(odd){
background-color:#FFFFFF;
}
.frameregels:nth-child(even){
background-color:#f9f9f9;       
}
.frameregels:hover{
background-color:#ecf5f9;
border-color:#66afe9;
}

<div class="xxlarge-12 xlarge-12 large-12 medium-12 small-12 columns frameregels">
<div class="xxlarge-1 xlarge-1 large-2 columns large-down-hidden">[artikelnr]</div>
<div class="xxlarge-11 xlarge-11 large-10 columns large-down-hidden">[omschrijving]</div>
</div>
<div class="xxlarge-12 xlarge-12 large-12 medium-12 small-12 columns frameregels">
<div class="xxlarge-1 xlarge-1 large-2 columns large-down-hidden">[artikelnr]</div>
<div class="xxlarge-11 xlarge-11 large-10 columns large-down-hidden">[omschrijving]</div>
</div>
<div class="xxlarge-12 xlarge-12 large-12 medium-12 small-12 columns frameregels">
<div class="xxlarge-1 xlarge-1 large-2 columns large-down-hidden">[artikelnr]</div>
<div class="xxlarge-11 xlarge-11 large-10 columns large-down-hidden">[omschrijving]</div>
</div>

Answer 1

margin-bottom:-1px是一个完全正确的想法，但是你需要更多的东西来实现它：

• 请确保您不会将其应用于最后一个元素以保留列表中的干净边界框
• 以接受z-index属性的方式定位元素，以便您可以移动您在前景中悬停的元素。如果你不这样做，你将改变边框的颜色，但下一个元素的边框只是覆盖它。

在实践中，这是它的工作原理（为美容添加填充）：

＆＃13;

＆＃13;

.frameregels {
  border-bottom: 1px solid #e1e1e1;
  border-top: 1px solid #e1e1e1;
  padding: 5px 0;
  position: relative;
  z-index: 0;
}
.frameregels:not(:last-child) {
  margin-bottom: -1px;
}
.frameregels:nth-child(odd) {
  background-color: #ffffff;
}
.frameregels:nth-child(even) {
  background-color: #f9f9f9;
}
.frameregels:hover {
  background-color: #ecf5f9;
  border-color: #66afe9;
  z-index: 1;
}

＆＃13;

<div class="frameregels">
  <div>[artikelnr]</div>
  <div>[omschrijving]</div>
</div>
<div class="frameregels">
  <div>[artikelnr]</div>
  <div>[omschrijving]</div>
</div>
<div class="frameregels">
  <div>[artikelnr]</div>
  <div>[omschrijving]</div>
</div>
<div class="frameregels">
  <div>[artikelnr]</div>
  <div>[omschrijving]</div>
</div>

＆＃13;

＆＃13;

＆＃13;