某些子元素未触发鼠标悬停事件答案

【问题标题】：Mouseover event not triggered on some child elements某些子元素未触发鼠标悬停事件
【发布时间】：2014-01-07 19:58:38
【问题描述】：

所以我有一个菜单项需要在鼠标悬停时触发：

<li class="nav-list valign browse">
   <a href="#" class="topnav-item text-small">
   Browse
   <span class="icon-menu"></span>
   </a>
</li>

跨度的 css 看起来像：

  .icon-menu:before {
     content: "\e612";
  }

   [class*="icon-"]:before {
      color: #ff3200;
   }

如果我设置一个 jQuery 触发器，例如：

  $(".nav-list").on('mouseover', function(e) {
     e.preventDefault();
     ...
  }

结果是每当我将鼠标悬停在图标上时，都不会触发该事件。当我将鼠标悬停在“浏览”字样上或

中的任何位置时会触发它。有什么原因吗？难道我做错了什么？什么是正确的方法？

编辑：刚刚发现错误，其实是另外一个问题。我已将 on('click'.. 替换为 on('mouseover'..，因此缺少一个 'mouseout' 以使新代码正常工作。只是在这里讨论它让我意识到我走错了路。:)

【问题讨论】：

【解决方案1】：

如果你想在鼠标悬停图标时触发一个事件，你应该这样做：

  //access .icon-menu instead of .nav-list
  $(".nav-list .icon-menu").on('mouseover', function(e) {
    alert("ok") 
    e.preventDefault();
  });

顺便说一句，您在 CSS 中使用 .icon-user，在 HTML 中使用 icon-menu

【讨论】：

我用正确的 css 更新了我的帖子，复制/粘贴错误，对此感到抱歉。
好的，我的回答回答了你的问题吗？
我相信你做到了。只需将$('.nav-list .icon-menu') 更改为$('.nav-list') OP 希望它在鼠标悬停整个li 时触发
@metsales 将 $('nav-list .icon-menu') 更改为 $('.nav-list') 让我们回到我原来的问题 :)。我的代码中一定还有其他错误，我现在正在调查。