Question

我是JQuery的新手。我想做这个工作。如果用户将鼠标移到文本上，则向用户显示 ul shold，如果用户选择此 ul 中的每个iems，则此 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>

Answer 1

使用$(this)更改仅悬停li的颜色

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

演示----> http://jsfiddle.net/Sn9hE/

Answer 2

仅使用CSS：

DEMO

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

否则：

DEMO

$(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");
    });
});

DEMO

更改ul标签中每个项目的颜色

2 个答案: