0

私はJQueryが初めてです。この仕事がしたい。ユーザーがテキストの上にマウスを置くと、 ulがユーザーに表示され、ユーザーがこのul内の各アイテムを選択すると、このliの色が赤に変更されます。私はこのコードを書きましたが、ユーザーがすべてのリスの色を選択した場合、どうすれば問題を解決できますか?

<script>
    $(document).ready(function () {
        $('#div1').hover(function () {
            $('#ul1').css("display", "")
        },
            function () {
                $("#ul1").css("display", "none");
            });
        $('li').hover(function () {
            $('li').css("color", "red")
        }, function () {
            $('li').css('color', 'black');
        });
    });
</script>
</head>
<body>
<h1>Welcome to our website</h1>
<br />
<div id="div1"><p id="p1" style="font-size:large">Our products </p>
<br />
<ul style="display:none" id="ul1" >
<li>Milch</li>
<li>Schokolade</li>
<li>kuchen</li>
<li>Honig</li>
</ul>
</div>
</body>
</html>
4

2 に答える 2

2

ホバーのみ$(this)の色を変更するために使用しますli

 $('li').hover(function () {
      $(this).css("color", "red")
 }, function () {
      $(this).css('color', 'black');
 });

デモ----> http://jsfiddle.net/Sn9hE/

于 2013-07-24T15:50:01.360 に答える
1

CSS のみを使用:

デモ

#ul1 {display:none;}
#div1:hover #ul1{display:block;}
#ul1 li:hover {color:red}

さもないと：

デモ

$(document).ready(function () {
    $('#div1').hover(function () {
        $('#ul1').toggle()
    });
    $('#ul1 li').hover(function () {
        $(this).css("color", "red")
    }, function () {
        $(this).css('color', 'black');
    });
});

css() メソッドを使用する代わりに、スタイリングにはクラスを使用する必要があります。

.red {color:red;}

次に、コードは次のようになります。

$(document).ready(function () {
    $('#div1').hover(function () {
        $('#ul1').toggle()
    });
    $('#ul1 li').hover(function () {
        $(this).toggleClass("red");
    });
});

デモ

于 2013-07-24T15:49:44.780 に答える