onmouseenter和onmouseleave閃爍時顯示/隱藏div，如何管理？

我有一個div列表，每個div都包含一個圖像，將這個圖像懸停在一個div必須出現。這個div將在鼠標離開時消失。這是我的javescript代碼：onmouseenter和onmouseleave閃爍時顯示/隱藏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：

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

鼠標懸停在div閃光燈beetween隱藏和顯示狀態，我怎麼能管理它？我只想在mouseenter時只有1個呼叫，而當mouseleave在列表的每個div上時只有1個呼叫

來源

2016-04-22 user31929

問題尋求幫助的代碼必須包括必要的重現它最短的代碼**在問題本身**最好在[**堆棧片段* *]（https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/）。請參閱[**如何創建一個最小，完整和可驗證示例**]（http://stackoverflow.com/help/mcve） –

放置一把小提琴，這將使它更容易使用。 –

原因是當您將圖像懸停並顯示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(); 
 
}

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

來源

2016-04-22 15:36:03 BenG

onmouseenter和onmouseleave閃爍時顯示/隱藏div，如何管理？

回答

相關問題