CSS图片悬停工作水平而不是垂直方向

我目前工作在我的客户的网站CSS导航系统在http://cjcdigital.net/clients/andrea并且在顶部导航一直工作正常，我无法重新创建包含了社会的垂直侧边栏的滚动效果媒体按钮。CSS图片悬停工作水平而不是垂直方向

为了实现顶部导航影响我随后在以下步骤： http://www.elated.com/articles/css-rollover-buttons/ 用我的导航元素各自为堆叠顶部/底部。

然而，对于侧面导航，尽管设置图像：悬停精灵推到左侧时，图像悬停属性不会在所有的踢。

下面是从顶部导航一些代码，再下面是代码形式的侧NAV。

#headerMenu {width: 1200px;} 
#headerMenu ul{display: inline;} 
#headerMenu li a{top:334px; position:absolute;} 
#magazine 
{ 
    display: block; 
    width: 112px; 
    height: 17px; 
    background: url("./images/magazine.gif") no-repeat 0 0; 
    left:160px; 

} 

#magazine:hover 
{ 
    background-position: 0 -17px; 
} 

#magazine span 
{ 
    position: absolute; 
    top: -999em; 
}

社会导航

#facebook 
{ 
    display: block; 
    width: 149px; 
    height: 57px; 
    background: url("./images/facebook.gif") no-repeat 0 0; 
} 

#facebook:hover 
{ 
    background-position: -300 0; 
} 

#facebook span 
{ 
    position: absolute; 
    top: -999em; 
}

提前感谢您的任何援助

来源

2012-04-06 theonlylos

尝试修复页面上的CSS 404和JS错误。 – j08691 2012-04-06 01:44:32

您还没有指定在你的CSS声明任何单位#facebook:hover。您可能想要做类似的事情：

#facebook:hover 
{ 
    background-position: -300px 0; 
}

来源

2012-04-06 01:48:03 chrisn

非常感谢！这解决了这个问题。我以前是位揭去，因为我看到了0 0财产被分配简写为背景图像的代码，但我想这并不适用于非零值。从现在开始，我将不惜一切代价避免速记的另一个原因。 – theonlylos 2012-04-06 01:56:18

CSS图片悬停工作水平而不是垂直方向

回答

相关问题