Jquery - hover () and mouseleave ()

Question

Jquery - hover () and mouseleave ()

Navigation

#1 by (2 votes)
#2 by (1 votes)

2

I have a problem.

I have two divs with a certain distance between them. I would like that when I position the mouse in the first div, the second div appears and I can move 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 like that.

Follow the fiddle: link

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

Thanks in advance.

javascript jquery

asked by anonymous 02.06.2015 / 21:46

2 answers

1

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>

02.06.2015 / 22:15

Server folder listing appears in browser Displaying Modal with model passed inside a foreach in C # asp.net MVC

score 2 · Accepted Answer

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);    
});