行边框顶部边框底部悬停单行?
问题描述:
首先,即时新的所以不给我一个难的时间;)行边框顶部边框底部悬停单行?
我有一个问题,我的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>
答
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>
不幸的是,你已经陷入同样的陷阱,所有新提问者分为:你没有阅读Stack Overflow帮助文档。这些文档清楚地表明,您应该包含您的代码,以便人们可以自愿提供宝贵的时间来帮助您。 –
检查你的CSS类似于'.tableRow:hover'或'tr:hover'的东西 - 很可能它只是表格行中的样式。 – Santi
不清楚。它的div不是表 – nevtu