行邊框頂部邊框底部懸停單行？

Question

首先，即時新的所以不給我一個難的時間;）

我有一個問題，我的foreach造型。我想要的是，如果我徘徊在行。它只返回單行底部和頂部邊界。 在這種情況下，當我懸停在下一行時，其他行的底部頂部邊框在那裏創建一個2px邊框。我嘗試了很多事情：margin-top：-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屬性的方式定位元素，以便您可以移動在前景中懸停的元素。如果你不這樣做，你會改變邊框的顏色，但下一個元素的邊框只是覆蓋它。

在實踐中，這是它是如何工作（添加了美容填充）：

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

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