when hover on div1 depenting on if it is on div2 or not it should act differently

Question

I have a complicated scenario,

I have 2 div as follow:

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

whenever user mousehover on id1 the id2 appears so I have the following js code:

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

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

But when user leaves the id1 , if the mouse is on id2 the id2 should be visible but if the mouse leaves id1 without hovering on id2 , id2 should be disappear.

Now I do not know what to do ? when I use the following code as soon as mouse leaves id1 id2 disappears no matter if I am on id2 or not:

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

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

Can anyone help? is it even possible to do that?(I also tried to use jfiddle but their server seems to be down)

Answer 1

You can use like this

$("#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;");
});

On id1 mouseout you use mouseenter on the id2 .

Here is JSbin