Question

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

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

Answer 2

好吧，你应该使用：

$("#professorDropDown").on('hover', 'li', function () {
    $(this).css("color","white");
});

因为，您正在生成列表项，而不是页面加载。我建议使用类而不是JS直接应用CSS样式。

Answer 3

请注意，您为ul元素添加了一个监听器，而不是li。

由于li是动态生成的，请使用以下代码：

for (var i=0;i < 4; i++) {             
    $(".profResults").append('<li  class"profResultsName">item</li>');
    listen();
}

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

示例：http://jsfiddle.net/Mqfx8/

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

3 个答案: