Zeile Grenze-oben Grenze-unten Hover einzelne Zeile?

Question

Zuerst bin ich neu, also gib mir keine harte Zeit;)

Ich habe ein Problem mit dem Styling meiner foreach. Was ich will ist, dass wenn ich in der Reihe schwebe. Es gibt nur den unteren und oberen Rand der einzelnen Zeile zurück. In diesem Fall, wenn ich in der nächsten Zeile den unteren oberen Rand von anderen Zeilen schwebe, entsteht dort ein 2px Rahmen. Ich habe viele Dinge ausprobiert: -1px etc ... einige gaben mir ein besseres Ergebnis, aber nicht das letzte.

.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 ist die völlig richtige Idee, aber Sie noch ein paar Dinge müssen dafür arbeiten:

• sicherstellen, dass Sie nicht anwenden, zu dem letzten Element, um eine saubere Begrenzungsbox Ihrer Liste zu behalten
• Positionieren Sie die Elemente so, dass eine Eigenschaft z-index akzeptiert wird, sodass Sie das Element, das Sie im Vordergrund halten, verschieben können. Wenn Sie dies nicht tun, ändern Sie die Farbe Ihres Rahmens, aber der Rand des nächsten Elements wird ihn nur überlagern.

In der Praxis ist dies, wie es funktioniert (padding für Schönheit hinzugefügt):

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