0

現在、クライアントのWebサイト（http://cjcdigital.net/clients/andrea ）でCSSナビゲーションシステムを使用していますが、上部のナビゲーションは正常に機能していますが、ソーシャルメディアを含む垂直サイドバーでロールオーバー効果を再現できません。ボタン。

最高のナビゲーション効果を実現するために、次の手順に従いました。http: //www.elated.com/articles/css-rollover-buttons/ ナビゲーション要素をそれぞれ上下に積み重ねます。

ただし、サイドナビゲーションの場合、スプライトを左に押すように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;
}

助けてくれてありがとう

4

1 に答える 1

1

のCSS宣言で単位を指定していません#facebook:hover。あなたはおそらく次のようなことをしたかったでしょう：

#facebook:hover
{ 
  background-position: -300px 0;
}
于 2012-04-06T01:48:03.283 に答える