2

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.

2
  • então, seu código já faz isso, quando você coloca o mouse entre os dois quadrados(divs) ele esta nessa condição(fora de ambos), deseja que o programa faça tipo um delay, um retardo para que dê tempo de você chegar com o mouse até a outra div ? Commented 2/06/2015 às 19:51
  • @SneepSNinjA, isso mesmos. Acho que essa seria a forma adequada. Como eu faço isso? Commented 2/06/2015 às 19:57

2 Respostas 2

2

Com delay resolve assim:

    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);    
});
3
  • Esqueci de comentar no código o valor 1000 é igual a 1 segundo (1000 miléssimo de segundo) se precisar ajustar o delay Commented 2/06/2015 às 20:28
  • Funcionou perfeitamente. Preciso fazer algo aqui para aumentar sua reputação? Commented 2/06/2015 às 21:17
  • 1
    jsfiddle.net/hbp7kfp2/5
    – Jorge B.
    Commented 3/06/2015 às 16:07
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>
3
  • @re22, me desculpa. Mas não concordo com você em editar minha resposta, uma vez que o autor da pergunta já possuía a biblioteca jQuery em seu código. Se você for corrigir isso toda vez pode abrir todos os tópicos e colocar. Desnecessário! Commented 3/06/2015 às 11:15
  • Você pode reverter qualquer edição feita nas suas respostas. Eu inclui o jQuery por você postar o código como snippet, se for pra postar algo que não funciona no browser então use o bloco de código normal. Commented 3/06/2015 às 14:32
  • Colega, o Jquery adicionado pelo @re22 ao exemplo é para funcionar, os Snippets são para reproduzir códigos, se você não vai executar nada, então não use o snippet use o icone { }, achei a edição favorável ao poste. Removi o snippet que não é necessário no exemplo
    – Syzoth
    Commented 3/06/2015 às 14:47

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .