Q:

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

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,

A:

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.

