Jquery - Hover() and mouseleave()

Question

I have a problem.

I have two div with a certain distance between them. I would like that when I place the mouse on the first div, the second div appears and I can pass the mouse from one to the other without the second div disappearing. Only disappear when the mouse is out of both.

I know I could put all this inside a larger div and schedule the event for that div. But in my application, the div that will appear in Hover() is in another part of the code and I need it to be so.

Follow the fiddle: https://jsfiddle.net/hbp7kfp2/3/

HTML

<div id="div1"></div>
<div id="div2"></div>

CSS

#div1 {
    width: 100px;
    height: 100px;
    background-color: red;
    margin: 10px;
    float:left;
}
#div2 {
    width: 100px;
    height: 100px;
    background-color: blue;
    margin: 10px;
    float: left;
    display: none;
}

JS

$('#div1, #div2').hover(function(){
    $('#div2').show();
});

$('#div1, #div2').mouseleave(function(){
    $('#div2').hide();
});

From now on, thank you.

Answer 1

With delay resolves like this:

    var vermelho = 0;
var azul = 0;
$('#div2').hover(function(){
    $('#div2').show();   
    azul = 1;
});

$('#div1').hover(function(){
    $('#div2').show();
    vermelho =1;    
});

function fechar(){    
    if(vermelho==0 && azul==0){ $('#div2').hide(); }    
}

$('#div1').mouseleave(function(){    
    vermelho=0;
    setTimeout(function(){ fechar(); },1000);    
});

$('#div2').mouseleave(function(){    
    azul=0;
    setTimeout(function(){ fechar(); },1000);    
});

Answer 2

jQuery:

$('#div1').hover(function() {
  $('#div2').show();
}).mouseout(function() {
  $('#div2').show();
});

$('#all').mouseleave(function() {
  $('#div2').hide();
});

CSS:

#all {
  display: table;
}
#div1 {
  width: 100px;
  height: 100px;
  background-color: red;
  margin: 10px;
  float: left;
}
#div2 {
  width: 100px;
  height: 100px;
  background-color: blue;
  margin: 10px;
  float: left;
  display: none;
}

HTML:

<div id="all">
  <div id="div1"></div>
  <div id="div2"></div>
</div>