onmouseenterとonmouseleaveを表示/非表示にすると、管理する方法は？

Question

私はdivのリストを持っています、各divは画像を含んでいます。このdivはマウスを離すと消えます。

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

リストの各divの内側に配置され、この彼のHTML：：これは私のjavescriptコードであるマウスの

<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;?>);" > 

が非表示beetweenのdivフラッシュを置いて、状態を示し、私はどのように管理することができますそれ？私はmouseenterが1回だけ呼び出すとリストの各divにmouseleaveが1回だけ欲しい

Answer 1

なぜなら、画像をホバーしてdivが表示されているために画像が押し下げられていて、再び隠れて隠れて、繰り返してフリッカーを表示する。

これを停止する方法の1つは、画像を配置することです。例えば

： -

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);">