How to change a cursor to a pointer when hovering over a dynamic list using JQuery -
i have list appending after screen loads. want change cursor pointer after hovering. far i've tried using .on event doesn't seem working. please @ 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 need more details on overall goal of code above is.
thanks,
how using plain css using :hover pseudo
.item:hover { cursor: pointer; } if must use javascript, use mouseenter instead of mouseover , reset default on mouseleave.
Comments
Post a Comment