在React.js应用程序中使用jQuery风格的悬停CSS样式

Question

我有一个将项目添加到列表的React.js应用程序。在我的index.html文件中，我使用jQuery来方便地将鼠标悬停在某些元素上，从而导致更改其他元素上的样式。但是，添加新项目后，jQuery似乎无法识别它们。

$(".list-item").hover(function(){ 
    $(this).css("border", "1px solid #000"); 
    $("."+this.childNodes[0].classList[0]+" .item").css("display", "block"); 
    $("h2."+this.childNodes[0].classList[0]).css({"color":"#555"}); 
}, function(){ 
    ... 
}) 

这适用于那些当应用程序被加载当前列表中的项目，而不是后来由用户添加的元素。有没有办法让jQuery识别新元素，还是有更好的方法只使用CSS或React？

Answer 1

使用:hover CSS伪类。不要用jQuery来做。

.list-item:hover 
    border: 1px solid #000 
    ... 

    h2 
    .other-class 
    .etc