当我将鼠标悬停在 DIV 中的链接上时，我需要阻止 DIV 消失答案

【问题标题】：I need to stop a DIV disappearing when I mouse over the link in the DIV当我将鼠标悬停在 DIV 中的链接上时，我需要阻止 DIV 消失
【发布时间】：2019-09-10 02:33:03
【问题描述】：

这是我的完整代码。当我将鼠标悬停在 popupcontact div 上时，它会在其上显示 divtoshow div，并且它有一个名为 rahul 的链接，当我将鼠标悬停在该链接上时，它会隐藏 div 名称 divtoshow。

当我将鼠标移出而不是当我将鼠标悬停在链接上时，我的 div 应该隐藏。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js" type="text/javascript"></script>
</head>
<body>
    <div id="popupContact"  style="position:absolute;left:100px;top:100px;width:100px;height:50px;background-color:orange;border:1px solid red ;">
    </div>
    <div id="divtoshow" style="display:none;background-color:green; border:1px solid black;width:200px;height:100px;position:absolute;">
    dsfdssd <div><a href="#">rahul</a></div>
    </div>
</body>
</html>
<script  type='text/javascript'>
$(document).ready(function(){
    var popup_pos=$('#popupContact').offset();
    var timer;
     $("#popupContact").mouseover(function() {
        if(timer) {
            clearTimeout(timer);
            timer = null
           }
        timer = setTimeout(function() {
            console.log($("#VersionSelectField").is(':hidden'));
            if(!$("#VersionSelectField").is(':hidden')){
                $("#divtoshow").css('position',"absolute"); 
                $("#divtoshow").css('top',popup_pos.top-20);    
                $("#divtoshow").css('left',popup_pos.left-20);  
                $("#divtoshow").fadeIn(300);
                 $("#popupContact").hide();
            }

        }, 100);

        });

     $("#divtoshow").mouseout(function() {
            if(timer) {
                clearTimeout(timer);
                timer = null
               }
            timer = setTimeout(function() {
                $("#divtoshow").fadeOut("slow");
                 $("#popupContact").show();

            }, 1000);
    });
});
</script>

【问题讨论】：

标签： javascript jquery jquery-ui html

【解决方案1】：

而不是像这样的.mouseout()：

$("#divtoshow").mouseout(function() {

使用.mouseleave()，像这样：

$("#divtoshow").mouseleave(function() {

当输入像mouseout 这样的子元素时，这个不会触发 will，当你不希望它当前隐藏时。

另一个代码提示，您至少可以链接#divtoshow 选择器，或者更好的链接并将对象传递给.css()，如下所示：

$("#divtoshow").css({ position: "absolute", 
                      top: popup_pos.top-20, 
                      left: popup_pos.left-20 })
               .fadeIn(300);

此外，这不是您的标记的问题，但如果 #popupContact 有一个子元素，您会遇到与 mouseover 类似的问题，即 not-firing-on-children 等效为 mouseenter。

【讨论】：

@Rahul - 欢迎 :) 如果他们解决了您的问题，请务必接受答案 :)

【解决方案2】：

使用 setTimeout 和 clearTimeout 时，请务必通过调用 window.setTimeout 和 window.clearTimeout 来确保使用这些函数的完整路径。

我发现如果你不这样做，有时它在某些版本的 IE 中无法正常工作。

【讨论】：