Javascript 如何在鼠标移动超过5秒后隐藏元素？

#第1部分{
显示：块；
}
#第二组{
显示：无；
}
#容器：悬停>#div2{
显示：块；
}

第一组
第二组

您可以使用此

var delayMillis = 5000; //5 seconds

setTimeout(function() {
  //your code.
}, delayMillis);

代码将以5秒的延迟执行

$（“#div1”）.hover（函数（）{
$（'#div2'）.show（）；
}，函数（）{
$（'#div2'）.hide（）；
});
设置超时（淡出，5000）；
函数渐弱（）{
$（“#div2”）.hide（）；
}

第一组
第二组

您需要使用javascript或jquery来完成这项工作。当

#div1

悬停时，显示

#div2

，当未悬停时，使用javascript函数在5秒后隐藏

#div2

$("#div1").hover(function(){
  $("#div2").show();
}, function(){
  setTimeout(function(){
    $("#div2").hide();
  }, 5000);
});

如果您多次快速地来回悬停，间隔将无法正常工作。您应该将间隔存储在变量中，并在每次取消覆盖事件中使用

clearInterval（）

删除以前的间隔

var timer;
$("#div1").hover(function(){
  $("#div2").show();
}, function(){
  clearInterval(timer);
  timer = setTimeout(function(){
    $("#div2").hide();
  }, 5000);
});

var定时器；
$（“#div1”）.hover（函数（）{
$（“#div2”）.show（）；
}，函数（）{
清除间隔（计时器）；
计时器=设置超时（函数（）{
$（“#div2”）.hide（）；
}, 5000);
});
#div2{显示：无}

第一组
第二组
其他两个答案不完整。尝试在5秒内在链接上悬停两到三次，逻辑中断。试试这个，很明显，删除CSS


var intervalIsGoingOn=false；
document.getElementById（'div1'）.onmouseover=function（）{
document.getElementById（'div2'）.style.display=“block”；
}
document.getElementById（'div1'）.onmouseout=function（）{
if（intervalIsGoingOn）返回；
intervalIsGoingOn=true；
setTimeout（函数（）{
document.getElementById（'div2'）.style.display=“无”；
intervalIsGoingOn=false；
}, 1000);
};

第一组
第二组
对于当前HTML结构，隐藏同级元素，这在CSS转换中是完全可能的：


#第1部分{
显示：块；
}
#第二组{
/*使用不透明度隐藏元素，因为从
“显示：无”或“可见性：隐藏”不可能：*/
不透明度：0；
/*将转换延迟设置为5秒（5s），以便
元素的非悬停状态：*/
过渡延迟：5s；
}
#容器：悬停>#div2{
/*将不透明度更新为1；以使用
无透明度（根据口味调整）：*/
不透明度：1；
/*将属性设置为动画（“不透明度”），覆盖
具有线性过渡的0.3秒周期：*/
过渡：不透明度0.3s线性；
}

第一组
第二组
两个小时后，我明白了

<div id="container">
    <div id="div1">Div1</div>
    <div id="div2">Div2</div>
</div>


#div1{
    display: block;
}
#div2{
    display: none;
}


$('#container').mousemove(function() {
    $('#div2').show();
        setTimeout(function(){
            if ($('#div2').is(":hover")) {
        } else {
            $('#div2').hide();
      }
        },5000);
});


第一组
第二组
#第一组{
显示：块；
}
#第二组{
显示：无；
}
$（“#容器”）.mousemove（函数（）{
$（'#div2'）.show（）；
setTimeout（函数（）{
如果（$（'#div2'）。是（“：hover”））{
}否则{
$（'#div2'）.hide（）；
}
},5000);
});
你需要使用JS，如果你在事件处理程序中添加JS，它会造成整个混乱。你自己试试吧，你是对的，太复杂了。我更新了一篇帖子，我想这会有用的尝试快速盘旋4-5次。它不会像预期的那样工作