0

私はウェブデザインが初めてです。今、履歴書を作っています。次のようなナビゲーション div があります。

<div id="nav" class="grid_12">
    <div id="Home" class="grid_3">
        <div class="button">
            <a href="#">Home</a>
        </div>
    </div>

    <div id="Life" class="grid_3">
        <div class="button">
            <a href="#">Life</a>
        </div>
        <img src="img/someimg.jpg">
    </div>

    <div id="Portfolio" class="grid_3">
        <div class="button">
            <a href="#">Portfolio</a>
        </div>
    </div>

    <div id="Contact" class="grid_3">
        <div class="button">
            <a href="#">Home</a>
        </div>
    </div>
</div>

次に、ナビゲーション用のスクリプトがあります。

<script type="text/javascript>
    $("#nav img").hide();
    $(".button").focus(function() {
        $(this).next("img").fadeIn("slow");
    }).blur(function() {
    $(this).next("img").fadeOut("slow");
    }); 
</script>

誰かがボタンの上にマウスを置くと、その下に画像が表示されるようにしたいです。画像を適切に非表示にしていますが、fadeIn が機能していません。なぜ機能しないのかわかりません。

4

3 に答える 3

0

960gs を使用していると思いますが、1 つ気づいたことは、4 つの grid_3 div が grid_12 内にネストされていることです。960gs には、グリッドが親グリッド内にある場合にネストされたマージンを修正するために、.alphaと と呼ばれる 2 つのクラスが含まれています。.omegaクラスを最初の子divに配置する必要があり.alphaます-この場合はあなた<div id="#home">であり、.omegaクラスは最後の子divであるあなた<div id="Contact">です。これにより、内部でネストされた 4 つの grid_3 のマージンが修正されます。

于 2013-02-22T03:07:06.677 に答える
0

.focus「フォーカス」イベントにバインドされています（イベント標準ではなく、それが何であるかの説明にリンクしました）。これは、テキスト入力にタブで移動したりクリックしたりするときに最も一般的ですが、他の要素にも適用できます。

(mouseenterまたmouseover、子要素もホバーされている場合、前者は繰り返しトリガーされません)イベントは、マウスが要素に入ると発生します。反対はmouseleave( mouseout) です。 http://api.jquery.com/mouseenter/

于 2013-02-22T02:42:57.470 に答える
0

readyドキュメントのイベント内にスクリプトを入れてみてください:

<script type="text/javascript>
         $(document).ready(function(){
            $("#nav img").hide();
            $(".button").focus(function() {
                $(this).next("img").fadeIn("slow");
            }).blur(function() {
                $(this).next("img").fadeOut("slow");
            }); 
         });
</script>
于 2013-02-22T02:43:57.387 に答える