javascript - 悬停时带有边框底部的纯 CSS 等高列？

Question

我希望你能帮助我找到解决我在尝试后遇到的问题的方法 Matthew James Taylor's equal height columns使用纯CSS。

我试图在用户将鼠标悬停在列上时向列添加 border-bottom(参见图片:1)。我遇到的问题是，由于这些 DIV 是嵌套的，因此边框似乎堆叠在彼此之上(参见图片:3)。我试图让所有边框都处于同一水平，因为我想要的效果会让它们与灰线重叠

此外，图像中的灰色水平线会拉伸(stretch)到页面宽度的 100%，并与黑色 border-bottom 处于同一水平线上。当没有将鼠标悬停在任何标题上时(嗨，联系方式，twitter)我希望包含内容的列向上滑动直到只有标题可见，这将是我唯一想使用 Javascript 的东西。也许仅使用 CSS 不可能实现所有这些，或者也许有更好的方法？

**

Answer 1

看起来使用 display: table 比您当前使用的 CSS 技巧更容易解决这个问题。

http://jsfiddle.net/rrPKA/

#container { display: table; }
.row { display: table-row; }
.row > div { 
    display: table-cell; 
    width: 100px; 
    border-bottom: 1px solid lightgray;
    padding-left: 10px;
}
.row > div:hover { border-bottom: 1px solid gray; }