Question

我按照zhujy_8833在此页面上发布的代码jQuery changing background on hover。

它工作正常，但是当我使用jQuery动态地将li附加到ul时。我的鼠标悬停不会对李开火。我正在循环我从数据库中提取的一些数据并将它们附加到ul，如下所示：

在HTML中我有：

<div id="result-holder">
    <ul id="results-list">
    </ul>
</div>

用于推广ul的JQuery：

for (var i=0; i<data.length; i++){
    // #results-list is the ul id
    $('#results-list').append("<li class='lineInc' id='lineInc_"+i+"'>" + data[i] + "</li>");
}

尝试使用

更改背景颜色

$(document).ready(function(){
    $(".lineInc").mouseover(function(){
            $(this).addClass("hover")      //hover, add class "hover"
    });
    $(".lineInc").mouseout(function(){
            $(this).removeClass("hover");  //hover out, remove class "hover"
    });
});

CSS

ul#results-list .lineInc.hover{ 
      cursor:pointer;
      background:#900;
}

另外，我试过这个CSS但仍然无法正常工作

ul#results-list li.hover{ 
      cursor:pointer;
      background:#900;
}

你能帮我解决这个问题。非常感谢。

Answer 1

使用jquery on

$(document).ready(function(){
    $("#results-list").on("mouseover", ".lineInc" ,function(){
            $(this).addClass("hover")      //hover, add class "hover"
    });
    $("#results-list").on("mouseout", ".lineInc",function(){
            $(this).removeClass("hover");  //hover out, remove class "hover"
    });
});

将动态li附加到ul时，mouseover无法正常工作

1 个答案: