行の境界線上の境界線と底面の境界線の1本の線はありますか？

Question

まず、私は苦労しません。

私のforeachのスタイリングに問題があります。私が望むのは、もし私が列に乗るならば。 1行の下端と上端の境界線のみを返します。 この場合、次の行にカーソルを置くと、他の行の下の上の境界線が2pxの境界線を作成します。私は多くのものを試してみました：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>