2

いくつかの調査の後、以下のコードは画像ソースを変更するために正常に動作するはずですが、そうではありませんか?

$("#li_1").mouseover(function () {
            $(this).attr("src", "images/hover_12.png");
        }, function () {
            $(this).attr("src", "images/ori_12.png");
        });

HTML コード:

<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="demo.css">
<style>
li{
    display: block;
}
</style>
</head>

<body>
    <div id='wrap'>
        <div id="clickable_div">MENU</div>
            <div id="nav_menu">
                <ul class="dropDown">
                    <li id="li_1"><img src="images/ori_12.png"></li>
                    <li id="li_2"><img src="images/ori_14.png"></li>
                    <li id="li_3"><img src="images/ori_15.png"></li>
                    <li id="li_4"><img src="images/ori_16.png"></li>
                </ul>
            </div>
        </div>
    </div>

</body>
<script>
        $("#li_1").mouseover(function () {
            $(this).attr("src", "images/hover_12.png");
        }, function () {
            $(this).attr("src", "images/ori_12.png");
        });

        $('#wrap').mouseover( function(){
            $('#nav_menu').slideDown();
        });
        $('#wrap').mouseleave( function(){
            $('#nav_menu').slideUp();
        });

    </script>
</html>

デモ.CSS:

#clickable_div {width:166px; background-color:#9c9c9c;}
*{margin:0; padding:0}
#nav_menu{width:166px; height:auto; background-color:#CCC;display:none;}

#wrap{ width:166px }

アイデアはとてもシンプルです。要素をマウスオーバーして、アイテムを一覧表示するドロップダウン フィールを使用しようとしています。ホバーするアイテムごとに、画像liが置き換えられます。

4

1 に答える 1

4

要素ではなく、要素srcのを変更しようとしているようです。また、イメージ src を通常に戻すため のイベントも必要になります。LIIMG
mouseout

これを試して：

$("#li_1 img")
    .mouseover(function () {
        $(this).attr("src", "images/hover_12.png");
    })
    .mouseout(function () {
        $(this).attr("src", "images/ori_12.png");
    });


画像ごとにコード ブロックを追加する必要がないように動的にしたい場合は、これを試してください。

$('#nav_menu li img')
    .mouseover(function () {
        this.src = this.src.replace('/ori_', '/hover_');
    })
    .mouseout(function () {
        this.src = this.src.replace('/hover_', '/ori_');
    });
于 2013-09-25T02:23:29.050 に答える