未在某些子元素上触发鼠标悬停事件

Question

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

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

结果是每当我鼠标悬停图标时，都不会触发事件。当我鼠标悬停在'浏览'一词或其中的任何地方时触发它。 li>。有原因吗？难道我做错了什么？什么是正确的方法呢？

编辑：刚发现错误，实际上是另一个问题。我已经替换了（'click'... on on（'mouseover'..，所以缺少'mouseout'以使新代码正常工作。只是在这里讨论它让我意识到我在错误的轨道上。:)

Answer 1

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

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

FIDDLE

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

中使用icon-menu