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

Posted 2023-05-09

【中文标题】jquery悬停在我的列表项上不起作用

【英文标题】：jquery hover not working on my list items

【发布时间】：2011-07-04 12:14:11

【问题描述】：

我要解决一个奇怪的问题，我在使用 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>');

请帮帮我，因为我被困得很厉害。

谢谢 赫米什

【参考方案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');
);

【讨论】：

感谢您的回复。现在使用此代码，即使我不在类别列表 li 上，我也会每次都收到警报（'我走了'）。即使我将鼠标移动到其他地方，我也会收到此警报。你能帮我解决这个问题吗？谢谢

请记住，mouseover/mouseout 事件会冒泡。 OP 使用mouseenter/mouseleave 是正确的。

【参考方案2】：

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

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

.category_list li a 
    text-decoration:none;


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

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

---

你的 javascript 的问题在于：

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

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

你会需要这个：

$(this).find('a')

【讨论】：

HiPatrick。我使用了这段代码，但仍然无法获得任何警报。 $('.category_list li ').live("mouseenter", function() alert('我在这里'); $(this).find('a').css('text-decoration','underline '); ).live("mouseleave", function() alert('我走了'); $(this).find('a').css('text-decoration','none'); );请你给点光好吗..

@user：您能否在您的问题中发布实际的 HTML 标记。渲染后，您应该能够使用开发人员工具复制和粘贴它。您的代码应该可以工作。 Here's an example using your code.

@Patrick。它适用于 html 开发。工具，但不在我的 Mozilla 和 Internet 浏览器上。我错在哪里？

@它的容器 div 可以阻止它或过滤它吗？

@user：是的。因为您使用的是.live()，所以事件处理程序实际上放在document 上，并等待事件冒泡，如果导致事件的元素与'.category_list li' 选择器匹配，它就会触发。所以任何防止事件冒泡的东西都会导致事件永远不会到达document。防止冒泡的唯一方法是在容器（或li 元素的其他祖先）上有一个处理程序，该处理程序执行return false; 或event.stopPropagation()。那些会扼杀冒泡，事件永远不会到达.live()。

【参考方案3】：

终于！我使用了livequery，它奏效了！

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

@Patrick：感谢您的帮助。

希望它也能帮助其他人。