css - 悬停元素需要 CSS 帮助 - 无法扩展到页面的左侧和右侧

Question

需要一些 CSS 大师的帮助。如果您访问我的链接:

http://www.gabbr.com/js/viewer/cmedata/index1.html

并将鼠标悬停在年份(顶部中间、2008 年、2009 年、2010 年等)上，您会注意到从页面顶部延伸到底部的橙色条。我试图在左侧(月和日)获得相同的效果，但我做不到。

我遇到的问题是，无论是#dayleft 还是#monthleft，我都无法让橙色悬停条从屏幕左侧延伸出去。它一直延伸到屏幕的右边距，但没有延伸到左边。问题是 margin-left: 15px;在#monthleft 和 margin-left: 80px;在#dayleft。但我无法摆脱这些，因为我需要它们作为字母间距。

有什么建议吗？

Answer 1

#monthleft ul li a:hover {
   margin-left: -20px;
   width: 110%;
   text-indent: 20px;
}

将此添加到您的悬停代码中。这在 Firebug 中对我有用。

对 #dayleft 元素应用相同的原则，调整 margin-left 和 text-indent 的尺寸以适应。

编辑:这适用于#dayleft

#dayleft ul li a:hover {
   margin-left: -110px;
   width: 110%;
   text-indent: 110px;
}