2

Помогите реализовать такое. Есть 2 динамических блока добавленных на страницу через $().html()

Пускай это будут div_1 и div_2.

  • div_1 - по умолчанию виден.
  • div_2 - по умолчанию скрыт.

При ховере на div_1 показывается div_2 (он находится вплотную к div_1)

При переходе ховера с div_1 на div_2 - оба элемента видны.

При переходе ховера снова на div_1 - div_2 прячется, div_1 - виден.

Если ховер НЕ находится на каком либо из этих элементов, все дивы скрываются. Сначала скрывается div_2, а через 2 секунды прячется div_1.

1 ответ 1

0

Вот пример реализации вашего вопроса:

$(document).ready(function(){
  $('body').append('<div class="div_1"></div><div class="div_2"></div>');
  var first_hover = true;
  $(document).on('mouseover', '.div_1', function(){
    if(first_hover){
      $('.div_2').show();
      first_hover = false;
    }
  });
  $(document).on('mouseover', '.div_2', function(){
    $('.div_2').show();
  });
  $(document).on('mouseleave', '.div_1', function(){
    if(!$('.div_2').is(":hover")){
      $('.div_2').hide();
      setTimeout(function(){$('.div_1').hide();}, 1000);
    }    
  });
  
  $(document).on('mouseleave', '.div_2', function(){
    if(!$('.div_1').is(":hover")){
      $('.div_2').hide();
      setTimeout(function(){$('.div_1').hide();}, 1000);
    }
    else{
      $('.div_2').hide();
    }
  });
  
});
body{
  margin-top: 50px;
}
.div_1{
  height: 20px;
  background: red;
}
.div_2{
  height: 20px;
  background: blue;
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.