onmouseenter и onmouseleave мигают, когда показывают/скрывают div, как управлять?

Question

У меня есть список divs, каждый div содержит изображение, зависающее этим изображением, должен появиться div. Этот div исчезнет при уходе с мыши. Это мой javescript код:

function Open(id){ 
     var div="#but_container_crs_box_"+id; 
     $(div).show(); 
    } 
    function Close(id){ 
     var div="#but_container_crs_box_"+id; 
     $(div).hide(); 
    } 

это его HTML-код, который помещается внутри каждого DIV списка:

<div id="but_container_crs_box_1" class="but_container_crs" style="display:none;">ShowHide content</div> 

    <img src="images/photo.jpg" alt="" class="img_box" onmouseenter="javascript:Open(<?php echo $i;?>);" onmouseleave="javascript:Close(<?php echo $i;?>);" > 

На мыши парят в Див вспышки Разногласия между шкурой и показать состояние, как я могу управлять Это? Я хочу только 1 вызов, когда mouseenter и только 1 вызов, когда мышь на каждом div из списка

Answer 1

Причина в том, что при наведении изображения и отображении div он нажимает изображение вниз, вызывая событие mouseout, снова скрываясь, и повторяется, чтобы отобразить непрерывное мерцание.

один из способов остановить это, чтобы разместить изображение.

, например: -

function Open(id) { 
 
    var div = "#but_container_crs_box_" + id; 
 
    $(div).show(); 
 
} 
 

 
function Close(id) { 
 
    var div = "#but_container_crs_box_" + id; 
 
    $(div).hide(); 
 
}

img{ 
 
    position:absolute; 
 
    top:0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="but_container_crs_box_1" class="but_container_crs" style="display:none;">ShowHide content</div> 
 
<img src="http://www.axialis.com/adm_comment/module/gentlesource_module_smiley/smiley_16/angry.png" alt="" class="img_box" onmouseenter="javascript:Open(1);" onmouseleave="javascript:Close(1);">