1

私はstackoverflowを見て、さまざまなことを試してきましたが、何もうまくいかないようです。

私はアイデアがありません。

ここにこのメニューがあります (今のところ、私のリンクは非アクティブです)

<nav id="nav-left-en">
            <nav id="services-en">
                <a href="#">Services</a>
            </nav>

            <nav id="mission-en">
                <a href="#">Our Mission</a>
            </nav>

            <nav id="contact-en">
                <a href="#">Contact</a>
            </nav>

</nav>

そして、その上にカーソルを合わせると、画像が中心になります。私のテキスト自体は中央に配置されていません（したがって、問題がありますが、ホバーはどこでも同じように見える必要があるため、中央に配置したくありません）。現在、ホバーはテキスト自体と左揃えで表示されます。

これは私が試した最後のCSSです。私は他の人を試しましたが、アイデアがありません。この種のものを見ているスタックオーバーフローや他の場所には運がありませんでした。

（注：背景画像でも試しました）

background: url('images/hover.jpg')  no-repeat;
            border: 0;
        width:150px; /* this is the width I want it to be. The text itself is 115px*/
        color:white;
        background-position: -58px 0px ;

編集

私はコードを編集しました...そして、これはまさに私が探しているものですが、両側に余分なスペースがあることを除いて. たとえば、各項目の幅が 120 ピクセルだとします。色の幅は 150 ピクセルにする必要があります。したがって、各辺に 15 ピクセルが追加されます。

$(document).ready(function() {

    $('nav').hover(
        function () {
            $(this).css({"background-color":"#108040"});
            }, 
                function () {
                    $(this).css({"background-color":""});
                }
    );

});

おそらく、このコードは、私が探しているものを理解するのに役立ちます。この場合、js を使用することにしました (同じことを行う css よりも短いため)。

4

1 に答える 1

0

これは、ホバー時に背景画像を水平方向に「中央揃え」にします。ただし、提供されたコードの品質が低すぎて、この結果が期待どおりかどうかを視覚的に判断することはできません。

http://jsfiddle.net/u8hfw/5/

しかし、フィドル ( http://jsfiddle.net/u8hfw )で提供されている HTML と CSS の両方に構文エラーがあることに気付きました か? 機能させるためだけに、上記のフィドルでそれらを修正しました。それに加えて、HTML 属性、CSS ルール、セレクターの使用は非常に悪いものです。後で多くのバグが発生し、それらのデバッグに膨大な時間を費やすことになるかもしれません。

いくつかのアドバイス：

  • !importantCSS で回避するようにしてください。
  • id特定の要素をターゲットにする必要がある場合にのみ、HTML 属性を使用してください。それ以外の場合は、class属性を使用してください。たとえば、すべてのナビゲーションで同じクラスを使用し<nav class="menu-item">、単一の CSS ルールを適用します。.menu-item{ *your css here* }
    • -

構文エラーを見つけるには、W3C 検証サービスを使用してコードを検証します

于 2013-10-13T22:29:03.200 に答える