Question

我正在通过一个奇怪的问题，我添加了悬停功能到我的列表项，这是使用ajax动态生成的，但没有发生任何事情。代码执行没有任何错误但没有效果。即使警报没有显示为mouseenter和mouseout。警报会偶尔弹出，但不是每次都会弹出。我正在使用以下代码。

$('.category_list li').live("mouseenter", function() { 
alert('I m here');
  $(this).find('.category_list').css('text-decoration','underline');
}).live("mouseleave", function() {
alert('I m gone');
  $(this).find('.category_list').css('text-decoration','none');
});

我的HTML代码是

htmlData.push('<ul class="category_list">');
htmlData.push('<li><a href="javascript:void(0);" onclick="callGetApplicationDetails('+iIndex+',0);" >'+categoryName+'</a></li>');

请帮助我，因为我被困住了。

感谢 Hemish

Answer 1

尝试使用mouseover和mouseout事件。我相信您的过滤选择器正在寻找<li>元素父级？

$('.category_list li').live('mouseover mouseout', function(event) {
    if (event.type == 'mouseover') {
        alert('I m here');
        $(this).parent().css('text-decoration','underline');
    } else {
        alert('I m gone');
        $(this).parent().css('text-decoration','none');
    }
});

你可以使用新的css类

来清理jQuery

.category_list.over
{
    text-decoration: underline;
}

并使用toggleClass()

$('.category_list li').live('mouseover mouseout', function(event) {
    if (event.type == 'mouseover') { alert('I m here'); } 
    else { alert('I m gone'); }

    $(this).parent().toggleClass('over');
});

Answer 2

如果您不需要使用此功能支持IE6，请改用CSS：

示例： http://jsfiddle.net/QLsQp/

.category_list li a {
    text-decoration:none;
}

.category_list li:hover a {
    text-decoration:underline;
}

当:hover悬停时，这会使用a伪选择器影响嵌套的li元素。

你的javascript的问题在于：

$(this).find('.category_list')

...找不到任何内容，因为.category_list是<li>元素的祖先，而不是后代。

你需要这样做：

$(this).find('a')

Answer 3

最后！我使用了livequery，它有效！

$('.category_list li').livequery("mouseenter", function() {
    $(this).css({'background-color' : '#A9A8A8'})
}).livequery("mouseleave", function() {
    $(this).css({'background-color' : '#F4F4F4'})
});

@Patrick：谢谢你的帮助。

希望它也会帮助别人。

jquery悬停不在我的列表项上工作

3 个答案: