使用JQuery将鼠标悬停在动态列表上时如何将光标更改为指针答案

【问题标题】：How to change a cursor to a pointer when hovering over a dynamic list using JQuery使用JQuery将鼠标悬停在动态列表上时如何将光标更改为指针
【发布时间】：2013-05-03 14:51:23
【问题描述】：

我有一个列表，我要在屏幕加载后附加到该列表。我想在悬停后将光标更改为指针。到目前为止，我已经尝试使用 .on 事件，但它似乎不起作用。请查看带有...的行 $('.item').on('mouseover', function() { $('.item').css('光标', '指针');
});

$(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();
    });
});

如果您需要有关上述代码总体目标的更多详细信息，请告诉我。

谢谢，

【问题讨论】：

您的代码中的问题是您没有像对单击事件那样对鼠标悬停事件使用委托。顺便说一句，您应该在鼠标悬停回调函数中使用 $(this)

标签： jquery hover mouse-cursor

【解决方案1】：

使用 :hover 伪的纯 CSS 怎么样

.item:hover { cursor: pointer; }

如果您必须使用 javascript，请使用 mouseenter 而不是 mouseover 并在 mouseleave 上重置为默认值。

【讨论】：

嗯，是的。那太容易了。我不应该尝试强制使用 JQuery。谢谢！

【解决方案2】：

您可以使用纯 css 实现此目的。使用 :Hover 没有任何意义。

.item{

 cursor:pointer;
}

【讨论】：

【解决方案3】：

只用css

.item:hover {cursor : pointer}

【讨论】：