CODEWITHSUNDEEP
jqueryhovermouse-cursor
Stephen Hammett
Stephen Hammett

Reputation: 117

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,

Upvotes: 3

Views: 3162

Answers (3)

Suresh Atta
Suresh Atta

Reputation: 121998

Just with css

.item:hover {cursor : pointer}

Upvotes: 0

Anoop
Anoop

Reputation: 23208

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

.item{

 cursor:pointer;
}

Upvotes: 2

Selvakumar Arumugam
Selvakumar Arumugam

Reputation: 79830

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.

Upvotes: 3

Related Questions