纯CSS等高列，鼠标悬停时边框底部出现的效果

Question

我希望你能帮我找到一个解决方案，解决我在尝试使用纯CSS时遇到的问题，这与Matthew James Taylor的等高列有关。 我正在尝试在用户悬停在列上时向列添加border-bottom（见图1）。 我遇到的问题是，由于这些DIV嵌套在一起，边框似乎重叠在彼此上面（见图3）。我想让所有边框处于相同的水平线上，因为我想要的效果是它们与灰线重叠。

此外，图像中的灰色水平线将伸展到页面的100％宽度，并且将与黑色border-bottom处于相同的水平线上。 当没有悬停在任何标题（hi there！，contact，twitter）上时，我希望具有内容的列向上滑动，直到只有标题可见，这将是我想仅使用JavaScript完成的唯一事情。也许仅使用CSS不可能实现所有这些，或者可能有更好的方法？

**

- Jason

---

查看了图片后，仍然难以理解。你能在jsfiddle.net上创建一个简单的示例吗？ - Matt H

感谢回复，http://jsfiddle.net/cbGG7/ 显示了由于DIV嵌套而导致的堆叠边框问题。我正在尝试重新创建顶部设计，该设计可以在我原始帖子中附带的图片中看到。我希望使用等高列教程来实现这一点，但也许有更好的方法可以重新创建它？ - Jason

如果您想为col3获取一个悬停边框，那么为什么将其悬停应用于div col3而不是div container3呢？ - Matt H

我尝试向＃col3添加border-bottom，但它将边框定位到内容末尾而不是列底部。这将破坏我正在尝试实现的重叠效果。不过谢谢你的帮助，Matt。我很感激。 - Jason

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; }

- mrtsherman

---

很棒的东西，非常感谢，但不幸的是在IE7及以下版本中会出现问题。不过，它与我想要的功能完全一致。有没有办法使它在IE7及以下版本中优雅降级？ - Jason

不幸的是，我认为不行。您可能需要查看服务器日志，以查看有多少IE7/6用户。就在上周，微软宣布将自动更新所有IE7及以下版本的浏览器到8或9，截至1月份，目标<1% IE6用户。我认为IE7应该接近相同。我的保守公司今年也同意放弃IE6/7。http://www.anandtech.com/show/5248/microsoft-launches-ie6-countdown-site-will-begin-automatic-ie-upgrades-for-users - mrtsherman

根据这些统计数据，IE7的市场份额已经降至约3.4％，如果强制更新计划按计划进行，我预计到2012年中期这个数字将降至1％左右。http://www.w3schools.com/browsers/browsers_explorer.asp - mrtsherman

我已将您的答案标记为解决方案。非常好的补充信息，非常感谢并祝节日快乐！ - Jason