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

Question

I have a React.js app that adds items to a list. In my index.html file, I am using jQuery to facilitate hovering over certain elements leading to changing the style on other elements. However, after new items are added, jQuery seems not to recognize them.

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

This works for list items that are present when the app is loaded, but not for elements added later by the user. Is there a way to make jQuery recognize the new elements, or is there a better method using only CSS or React?

Answer 1

Use the :hover CSS pseudo class. Don't do it with jQuery.

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

    h2
    .other-class
    .etc