0

我是 JQuery 的新手。我想做这份工作。如果用户将鼠标悬停在文本上，则应向用户显示ul ，并且如果用户选择此ul中的每个 iem，则此li的颜色应更改为红色。我已经写了这段代码，但是如果用户选择一个li，所有 lis 的颜色都会改变，我该如何解决我的问题，谢谢？

<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 回答