estou com um problema.
Tenho duas div com uma certa distância entre elas. Eu gostaria de que quando eu posicionar o mouse na primeira div, a segunda div apareça e eu consiga passar o mouse de uma para a outra sem a segunda div sumir. Só sumir quando o mouse estiver fora de ambas.
Eu sei que eu poderia colocar tudo isso dentro de uma div maior e programar o evento para essa div. Mas na minha aplicação, a div que vai aparecer no hover() está em outra parte do código e eu preciso que seja assim.
Segue o 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();
});
Desde já, agradeço.