如何使用JQuery将鼠标悬停在动态列表上时将指针更改为指针
问题描述:
我有一个列表,我在屏幕加载后追加到列表。我想在悬停后将光标更改为指针。到目前为止,我尝试使用.on事件,但它似乎并没有工作。 ('。item')。on('mouseover',function(){('。item')。css('cursor','pointer');
});如何使用JQuery将鼠标悬停在动态列表上时将指针更改为指针
$(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();
});
});
让我知道你是否需要更多关于上述代码总体目标的更多细节。
感谢,
答
如何使用纯CSS使用:hover
伪
.item:hover { cursor: pointer; }
如果必须使用JavaScript,使用mouseenter
代替mouseover
以及重置为默认的mouseleave
。
+0
嗯是的。那太容易了。我不应该试图强制JQuery。谢谢! – 2013-05-03 14:55:19
答
你可以使用普通的CSS来实现这一点。使用:悬停没有任何意义。
.item{
cursor:pointer;
}
答
只是在你的代码的CSS
.item:hover {cursor : pointer}
问题是当你点击事件做不使用代表团鼠标悬停事件。顺便说一句,你应该使用$(this)内部鼠标悬停回调函数 – 2013-05-03 14:56:51