純CSS懸停的邊框底部的等高柱？

我希望你能幫我找到一個解決方案，我嘗試使用純CSS後Matthew James Taylor's equal height columns我遇到的問題。純CSS懸停的邊框底部的等高柱？

我試圖在用戶懸停時向列添加border-bottom（請參閱圖像：1）。我遇到的問題是，因爲這些DIV的嵌套邊界似乎堆疊在彼此之上（請參閱圖像：3）。我試圖讓所有邊界處於一個平坦的水平，因爲我要去的效果會讓它們與灰線重疊。

此外，圖像中的灰色水平線會延伸到100％的寬度頁面，並且與黑色border-bottom處於同一水平。當沒有懸停在任何標題上（hi there！，contact，twitter）時，我想讓內容的列向上滑動，直到只顯示標題，這將是我想要使用Javascript的唯一方法。也許所有這些都不可能只使用CSS，或者有更好的方法來做到這一點？

Image showing my problem **

來源

2011-12-23 Jason

難以遵循，甚至看之後的圖像。你能在jsfiddle.net中創建一個簡單的例子嗎？ – 2011-12-23 20:18:43

感謝您的回覆，http：//jsfiddle.net/cbGG7/顯示堆疊的邊框問題（由於DIV被嵌套）。我試圖重新創建可以在我的原始文章中包含的圖像中看到的頂級設計。我希望能夠使用平等高度列教程來實現這一點，但也許有更好的方法來重新創建它？ – Jason 2011-12-23 20:51:54

如果您正在嘗試爲col3設置懸停邊框，那麼您是否將鼠標懸停在div容器3而不是div col3上？ – 2011-12-23 20:59:21

它看起來像這樣將與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; }

來源

2011-12-23 20:43:16 mrtsherman

偉大的東西，非常感謝，但不幸的是，它在IE7及以下的中斷。但是，它的功能與我的想法完全一樣。有沒有辦法使它在IE7及以下版本中優雅地退化？ – Jason 2011-12-23 21:43:58

不幸的是，我不這麼認爲。你可能想看看你的服務器日誌，看看你有多少個IE7/6用戶。就在上週，MS宣佈，截至1月份，所有IE7及以下瀏覽器的瀏覽器數量將達到8或9個，IE6用戶數目目標<1％。我認爲IE7應該接近相同。今年我的保守公司最終同意放棄IE6/7。 http://www.anandtech.com/show/5248/microsoft-launches-ie6-countdown-site-will-begin-automatic-ie-upgrades-for-users – mrtsherman 2011-12-23 22:34:53

根據這些統計數據，IE7下降到3.4％左右，而如果強制更新按計劃運行，我預計2012年中期這一比例將達到1％左右。http://www.w3schools.com/browsers/browsers_explorer.asp – mrtsherman 2011-12-23 22:36:24

純CSS懸停的邊框底部的等高柱？

回答

相關問題