jquery - 如何使用 <li> 作为 jquery 悬停选择器？

Question

我有一个列表，当我将鼠标悬停在列表上时，我想更改其内容。为什么这不起作用？我可以使用 id 作为选择器，它会触发悬停功能，但随后列表项都会改变颜色，而不仅仅是我想要的颜色。我也无法使用个人 ID，因为它们是动态创建的。这是相关 jquery 的片段。

for (var i=0;i < count; i++)
    {   
        if (i == 4) {break;}
        var elemId = resultsTemp[i].split('.')[0];
        var elemName = resultsTemp[i].split('.')[1];                
        addToList += '<li id="'+elemId+'" class= "profResultsName">'+elemName+'</li>';
    }
        $("#professorDropDown").append(addToList);

这是另一个

$(".profResultsName").hover(function() 
{
    $(this).css("color","white");
},
function () 
{
    $(this).css("color","black");
});

这是相关的 html。

<ul id="professorDropDown" class="addContainer"></ul>

Answer 1

看起来有两个问题:class"profResultsName" 中缺少 = 和动态元素的处理

for (var i=0;i < count; i++)
{   
    if (i == 4) {break;}
    var elemId = resultsTemp[i].split('.')[0];
    var elemName = resultsTemp[i].split('.')[1];                
    addToList += '<li id="'+elemId+'" class="profResultsName">'+elemName+'</li>';//= missing after class
}
    $("#professorDropDown").append(addToList);

然后

$('#professorDropDown').on('mouseenter', 'li.profResultsName', function(){
    $(this).css('color', 'red')
}).on('mouseleave', 'li.profResultsName', function(){
    $(this).css('color', 'green')
})

演示:Fiddle