Как я могу запустить событие mouseover для дочернего элемента, если родительский элемент тоже имеет mouseover?

У меня есть область" справка " на моей странице, и каждый раз, когда пользователь наводит курсор на таблицу, справочная информация должна обновляться. Проблема заключается в том, что в таблице у меня есть флажок в 1 ячейке каждой строки, и когда пользователь наводит курсор мыши на этот флажок, я хочу, чтобы событие наведения курсора мыши на флажок переопределяло событие таблицы и отображалась справка по флажку. В настоящее время наведение курсора мыши на таблицу работает нормально, но ничего не происходит, когда я наведу курсор мыши на флажок. 

<table class="myTable">
   <tr>
      <th>Col1</th>
      <th>Col2</th>
   </tr>
   <tr>
      <td><input class="myCheckbox" type="checkbox" /></td>
      <td>Cell 2</td>
   </tr>
   <tr>
      <td><input class="myCheckbox" type="checkbox" /></td>
      <td>Cell 3</td>
   </tr>
</table>

<div class="myHelpMenu"></div>


$('.myCheckbox').mouseover(function() {
    $('.myHelpMenu').html("this is my checkbox help");
});

$('.myTable').mouseover(function() {
   $('.myHelpMenu').html("this is my tables help");
});
3 5
jquery html-table mouseevent hover mouseover

3 ответа:

ЖИВАЯ ДЕМОНСТРАЦИЯ

Это хороший способ обнаружить с помощью mouseover текущий target элемент, который завис, чем с помощью чистого JS для извлечения .tagName Вы можете создать список сообщений объект и получить нужный.

$('.myTable').mouseover(function( e ) {

  var tag = e.target.tagName;

  var messages = {
    "INPUT" : "this is my checkbox help",
    "TABLE" : "this is my tables help"
  };

  $('.myHelpMenu').text( messages[tag] );

});

Если вы хотите очистить свое информационное сообщение, сделайте следующее: 

$('.myTable').on('mouseover mouseleave',function( e ) {

  var tag = e.target.tagName;

  var messages = {
    "INPUT" : "this is my checkbox help",
    "TABLE" : "this is my tables help"
  };

  $('.myHelpMenu').text( messages[tag] );

  if(e.type=='mouseleave')
    $('.myHelpMenu').empty();

});
4

Похоже, вы хотите, чтобы курсор мыши для флажка остановить распространение до таблицы?

Если это так, то это должно быть сделано.

$('.myCheckbox').mouseover(function(e) {
    $('.myHelpMenu').html("this is my checkbox help");
    e.stopPropagation();
});
3

Так как mouseover для таблицы - это для всей области, просто вызовите mouseenter вместо этого. Затем вы можете добавить mouseout для повторного обновления после того, как они покинут таблицу.

0