Just to let you know, I'm new here so please be patient with me ;)
I'm having an issue styling my foreach loop. My goal is to have a single line border appear at the top and bottom of each row when hovered over. However, the problem is that when I hover over the next row, it also shows the borders from the previous rows, creating a 2px border effect. I've tried various solutions like adjusting the margin with no success.
https://i.sstatic.net/d10xb.png
https://i.sstatic.net/TiZmX.png
.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>