html - CSS 图像悬停在水平方向上有效，但在垂直方向上无效

Question

我目前正在我客户的网站上使用 CSS 导航系统 http://cjcdigital.net/clients/andrea虽然顶部导航运行良好，但我无法在包含社交媒体按钮的垂直侧边栏上重新创建翻转效果。

为了实现顶级导航效果，我按照以下步骤操作: http://www.elated.com/articles/css-rollover-buttons/我的导航元素每个都堆叠在顶部/底部。

然而，对于侧面导航，尽管设置了 image:hover 以将 sprite 推向左侧，但 image hover 属性根本不会启动。

下面是顶部导航的一些代码，下面是侧边导航的代码。

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

在此先感谢您的帮助

Answer 1

您尚未在 #facebook:hover 的 CSS 声明中指定任何单位。你可能想做类似的事情:

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