Question

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

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

然而，对于侧面导航，尽管设置了图像：悬停以将精灵推向左侧，但图像悬停属性根本没有启动。

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

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

CSS图像悬停在水平但不垂直的情况下工作

1 个答案: