Использование mouseover и mouseout в элементе делает зависание постоянно мигающим

Question

Я визуализирую два элемента на странице JSP динамически, с динамическими идентификаторами. При наведении мыши на каждый элемент я делаю вывод div, а при выводе мыши я делаю то же значение displaynone. Проблема в том, что когда я наводил на div, div продолжает мигать. Как я могу это решить?

Примера код:

<table> 
    <tr> 
     <td> 
      <div onmouseover="showblock(hoverdivid)" onmouseout="hideblock(hoverdivid)">india</div> 
      <div class="hoverdiv" id="dynamicallygenerated"> 
       <li>a list of checkboxes with state names of the country hovered will be inserted using ajax</li> 
      </div> 
     </td> 
     <td> 
      <div onmouseover="" onmouseout="">america</div> 
      <div class="hoverdiv" id="dynamicallygenerated"> 
       <li>a list of checkboxes with state names of the country hovered will be inserted using ajax</li> 
      </div> 
     </td> 
    </tr> 
</table> 

<script> 
var showblock; 
var hideblock; 
$(document).ready(function (e) { 

    showblock = function (id) { 

     $("#" + id).show(); 

    } 
    hideblock = function (id) { 

     $("#" + id).hide(); 

    } 

}); 
</script> 

Продление моего вопрос

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

Answer 1

Это происходит потому что, когда отображается hoverdiv, ваша мышь находится на нем, поэтому происходит событие mouseleave, поэтому hoverdiv исчезает, а затем ваша мышь находится на первом div, так что происходит событие mouseenter, так что hoverdiv появляется снова .... и так далее .. это вызывает мерцание

Мое лучшее предложение - вложить hoverdiv: (вам нужно немного подкорректировать css)

<table> 
    <tr> 
     <td> 
      <div onmouseover="" onmouseout=""> 
       india 
       <div class="hoverdiv"></div> 
      </div> 
     </td> 
     <td> 
      <div onmouseover="" onmouseout=""> 
       america 
       <div class="hoverdiv"></div> 
      </div> 
     </td> 
    </tr> 
</table> 

Когда hoverdiv находится внутри другой div, mouseleave не будет срабатывать при наведении hoverdiv

Answer 2

Рабочая Демонстрационный http://jsfiddle.net/cse_tushar/FKacT/1

HTML

<table border="1"> 
    <tr> 
     <td> 
      <div class="div">india</div> 
      <div class="hoverdiv" id="dynamicallygenerated"> 
       <li>a list of checkboxes with state names of the country hovered will be inserted using ajax</li> 
      </div> 
     </td> 
     <td> 
      <div class="div">america</div> 
      <div class="hoverdiv" id="dynamicallygenerated"> 
       <li>a list of checkboxes with state names of the country hovered will be inserted using ajax</li> 
      </div> 
     </td> 
    </tr> 
</table> 

Css

td{ 
    vertical-align: top; 
} 

JS

$(document).ready(function() { 
    $('.div').hover(function() { 
     x = $(this).css('width'); 
     $(this).parent().find('.hoverdiv').show(); 
     $(this).css('width', $(this).parent('td').width()); 
    }, function() { 
     $(this).css('width', x); 
     $(this).parent().find('.hoverdiv').hide(); 
    }); 
});