nevtu nevtu - 4 months ago 18
HTML Question

row border-top border-bottom hover single line?

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.

enter image description here

enter image description here

.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

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>