javascript悬停动态失败

Question

我试图将鼠标悬停在动态图像中，必须显示动态 div，如果删除鼠标 div 必须隐藏，如果我在悬停在图像 div 上后转到该 div，如果我从图像中移出，则需要保持可见div 它必须被隐藏我尝试了类似的方法，但没有按预期工作，如果我将鼠标移出标记放在那里，它会隐藏div，一旦我删除鼠标就无法使用div中的选项，如果我将鼠标放在 div 中，一旦我从图像中移除鼠标，div 不会关闭，抱歉英语不好作为这种情况的解决方案？

  function GoView_respond(id){
      console.log('hovering');
      document.getElementById("pending_req_"+id).style.display="block";
    }

     var cl=0;

  function ExitView_respond(id){
     console.log('not hovering');
    if(cl!=1){
     document.getElementById("pending_req_"+id).style.display="none";
    }
 }

<a onmouseover="GoView_respond('1');" onmouseout="ExitView_respond_one('1');">over_here</a>
          <div class="respond_request" style="display:none;" id="pending_req_1" >
                <p class="user_details" onmouseout="ExitView_respond('1');">asdfasdfasfsdffsadfsadfasf</p>
          </div>

Answer 1

下面的代码可能有助于解决您的问题:

Javascript代码:

    function GoView_respond(id){
      console.log('hovering');
      document.getElementById("pending_req_"+id).style.display="block";
      cl = 1;
    }

     var cl=0;

  function ExitView_respond(id){
     console.log('not hovering');
    if(cl!=1){
     cl=0;
      document.getElementById("pending_req_"+id).style.display="none";
    }
 }

function GoView_respond_one(id) {

    setTimeout(function() {
      if(cl == 1) {
         cl = 0;
        document.getElementById("pending_req_"+id).style.display="none";
      }
    }, 2000);
  }
}

Html代码如下

<a onmouseover="GoView_respond('1');" onmouseout="GoView_respond_one('1');">over_here</a>
          <div class="respond_request" style="display:none;" id="pending_req_1" >
                <p class="user_details" onmouseover="GoView_respond('1');" onmouseout="ExitView_respond('1');">asdfasdfasfsdffsadfsadfasf</p>
          </div>

Demo Link供您引用。