Question

我有一个div列表，每个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();
    }

这是他放在列表中每个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隐藏在隐藏和显示状态之间，我该如何管理它？我只想在mouseenter上进行1次调用，并且在列表的每个div上进行mouseleave时只需要1次调用

Answer 1

原因是当您悬停图像并显示div时，它会向下推动图像，导致鼠标事件触发，再次隐藏隐藏，并重复显示连续闪烁。

停止此操作的一种方法是定位图像。

例如： -

＆＃13;

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

＆＃13;

img{
  position:absolute;  
  top:0;
}

＆＃13;

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

＆＃13;

onmouseenter和onmouseleave在显示/隐藏div时闪烁，如何管理？

1 个答案: