How to change a cursor to a pointer when hovering over a dynamic list using JQuery

Question

I have a list that I am appending to after the screen loads. I want to change the cursor to a pointer after hovering. So far I've tried using the .on event but it doesn't seem to be working. Please look at the line with.... $('.item').on('mouseover', function() { $('.item').css('cursor', 'pointer');
});

$(document).ready(function() {
    $('input').focus(function() {
        $('input[name=checklistInput]').css('outline-color','#FF0000');
    });
    $('#add').click(function() {
        var toAdd = $('input[name=checklistInput]').val();
        $('.list').append('<div class="item">' + toAdd + '</div>');
        $('input[name=checklistInput]').val('');
    });

    $('.item').on('mouseover', function() {
        $('.item').css('cursor', 'pointer');    
    });

    $(document).on('click','.item', function() {
    $(this).remove();
    });
});

Let me know if you need more details on what the overall goal of the code above is.

Thanks,

Answer 1

How about using plain css using :hover pseudo

.item:hover { cursor: pointer; }

If you must use javascript, use mouseenter instead of mouseover and reset to default on mouseleave.

Answer 2

You can achieve this using plain css. Use of :Hover does not make any sense.

.item{

 cursor:pointer;
}

Answer 3

Just with css

.item:hover {cursor : pointer}