行边框顶部边框底部悬停单行？

-3

我有一个问题，我的foreach造型。我想要的是，如果我徘徊在行。它只返回单行底部和顶部边界。在这种情况下，当我悬停在下一行时，其他行的底部顶部边框在那里创建一个2px边框。我尝试了很多事情：margin-top：-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>

来源

2016-08-03 nevtu

不幸的是，你已经陷入同样的陷阱，所有新提问者分为：你没有阅读Stack Overflow帮助文档。这些文档清楚地表明，您应该包含您的代码，以便人们可以自愿提供宝贵的时间来帮助您。 –

检查你的CSS类似于'.tableRow：hover'或'tr：hover'的东西 - 很可能它只是表格行中的样式。 – Santi

不清楚。它的div不是表 – nevtu

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>

来源

2016-08-03 21:53:21 TheThirdMan

行边框顶部边框底部悬停单行？

回答

相关问题