Javascript 当悬停在div1上时，取决于它是否在div2上，它的行为应该不同

我有一个复杂的场景

我有两个部门，如下所示：

<div id="id1"><div>
<div id="id2" style="display:none"><div>

但是当用户离开id1时，如果鼠标在id2上，id2应该可见，但是如果鼠标离开id1而没有在id2上悬停，id2应该消失

现在我不知道该怎么办？当我使用以下代码时，只要鼠标离开id1，id2就会消失，无论我是否在id2上：

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

    $( "#id2" ).removeAttr('style');
      $( "#id2").attr("style","float:left;height:20px;width:100%;background-  color:#F4F8FB;display:none;");
    });

有人能帮忙吗？甚至可以这样做吗？（我也尝试过使用jfiddle，但他们的服务器似乎已关闭）

您可以这样使用

$("#id1" ).mouseout(function() {
  $("#id2" ).mouseenter(function(){
     $("#id2").attr("style","float:left;height:20px;width:100%;background-color:blue;display:block");
});

$( "#id2" ).removeAttr('style');
  $( "#id2").attr("style","float:left;height:20px;width:100%;background-color:#F4F8FB;display:none;");
});

在

id1

mouseout上，在

id2

上使用

mouseenter

---

以下是

Pro提示：将这些样式定义为类，只需打开/关闭这些类。当然，我现在正在测试：）的可能重复，除非您能够合理解释此解决方案不适用于您的原因。

$("#id1" ).mouseout(function() {
  $("#id2" ).mouseenter(function(){
     $("#id2").attr("style","float:left;height:20px;width:100%;background-color:blue;display:block");
});

$( "#id2" ).removeAttr('style');
  $( "#id2").attr("style","float:left;height:20px;width:100%;background-color:#F4F8FB;display:none;");
});