jQuery-style hover CSS styling in React.js app

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?

cfraser · Accepted Answer · 2017-06-21 22:25:53Z

3

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

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

    h2
    .other-class
    .etc

answered Jun 21, 2017 at 22:25

cfraser

9616 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

jQuery-style hover CSS styling in React.js app

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related