0

背景画像とホバー効果を使用してナビゲーション バーを作成しました。それらをウェブサイトに適切に実装する方法を学ぼうとしています。

私はナビゲーションの 90% を設計しましたが、私が抱えている問題は、アイテムの 1 つにカーソルを合わせると、ホバー画像が元の画像と重ならず、余分なスペースが作成されることです。

CSS :

#bg {
    background-color: #EAEAEA;
    width: 761px;
}
#menu {
    background-color: #EAEAEA;
    height: 58px;
    list-style-type: none;
    padding-left: 1px;
}
#menu li.first a {
    background: url("../images/top_nav_f.png") no-repeat scroll 0 0 transparent;
    height: 180px;
}
#menu li a {
    background: url("../images/top_nav_f.png") no-repeat scroll 0 0 transparent;
    float: left;
    width: 190px;
    height: 180px;
}
#menu li.first a:hover {
    background: url("../images/menu_hover_f.png") no-repeat scroll 0 0 transparent;
} 
#menu li a:hover {
    background: url("../images/menu_hover.png") no-repeat scroll right top transparent;
    color: #FFFFFF;
    height: 58px;
}
#menu li.last a {
    background: url("../images/top_nav_n.png") no-repeat scroll 0 0 transparent;
}
#menu li.last a:hover {
    background: url("../images/menu_hover_r.png") no-repeat scroll 0 0 transparent;
}
.bar {
    margin-right: 38px;
    padding-top: 5px;
    text-align: center;
}
.n1, .n2 {
    color: #333333;
}

HTML :

  <nav id="bg">
            <ul id="menu">
           <li class="first">
            <a href="">
            <div class="bar">
              <div class="n2">Link 1 </div>
            </div>
           </a>

           </li>

            <li><a class="" href="">
            <div class="bar">
              <div class="n2">link 2 </div>
            </div>
             </a>
             </li>

            <li><a class="" href="">
            <div class="bar">
              <div class="n2">link 3 </div>
            </div>
            </a>
            </li>


             <li class="last"><a href="">
            <div class="bar">
              <div class="n2">link 4 </div>
            </div>
            </a>
            </li>
</ul>

</nav>

デモ: http://tinyurl.com/cqus3fb

私はこれをほぼ3日間機能させようとしてきました！

4

1 に答える 1

0

問題は、#menu li a:hover以下のルールにあります。

#menu li a:hover {
    background: url("../images/menu_hover.png") no-repeat scroll right top transparent;
    color: #FFFFFF;
    height: 58px;
}

バックグラウンド ルールを次のように変更する必要があります。

    background: url("../images/menu_hover.png") no-repeat scroll 0 0 transparent;

その理由は、背景の簡略宣言で、背景の位置をrightおよびtopに設定したためです。他のすべてのルールは および に設定され0て0います。したがって、基本的に背景は左ではなく右から配置され、a幅が 190 ピクセルで画像の幅が 180 ピクセルであるため、10 ピクセルのギャップがあるように見えます。

于 2012-11-30T19:12:56.953 に答える