Событие при наведении курсора не вызывается на некоторых дочерних элементах

0

Поэтому у меня есть пункт меню, который мне нужно вызвать при наведении курсора мыши:

<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'.. by on ('mouseover'.., поэтому "mouseout" отсутствовал, чтобы новый код работал правильно. Просто обсуждая его здесь, я понял, что оказался на неправильном пути. :)

  • 0
    Ваш код работает правильно. Смотрите здесь: jsfiddle.net/7j5Vu/1
Теги:
mouseover

1 ответ

2

Если вы хотите вызвать событие, когда мышь наводится на значок, вы должны сделать это следующим образом:

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

FIDDLE

BTW, который вы используете .icon-user в своем CSS и icon-menu в своем HTML

Поделиться
  • 0
    Я обновил свой пост с правильным кусочком CSS, плохой Copy / Paste, извините за это.
  • 0
    Хорошо, мой ответ ответил на ваш вопрос?
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню