row border-top border-bottom hover single line? - html

Question

First, im new so dont give me a hard time ;)
i have a problem with styling my foreach. What I want is that if I hover on the row. It only returns single line bottom and top border.
In this case when I hover on the next row the bottom top border from other rows are there creating a 2px border. I tried many things margin-top:-1px etc... some gave me a better result but not the final one.
.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 is the completely right idea, however you need a few more things for that to work:
make sure you don't apply it to the last element to retain a clean bounding box of your list
position the elements in a way that accepts a z-index property so that you can shift the element you're hovering in the foreground. If you don't do this, you will change the color of your border, but the next element's border is just going to overlay it.
In practice, this is how it works (padding added for beauty):
.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>