Не убирать блок если курсор находиться в его области

257

15 сентября 2017, 18:57

Здравствуйте. Есть два блока, нужно чтобы при наведении на блок 1 появлялся блок 2 и не исчезал до тех пор - покуда курсор мыши находится в области блока 1 или блока 2.

$("#contacts-view").hover(function() { 
  $(".yes-open-phone").animate({ 
    height: 'show' 
  }, 300); 
  $(".contacts-tab").css({ 
    "border": "1px solid #bd2c3c" 
  }); 
  $(".open-phone").css({ 
    "background": "url('/style/img/close-phone-color.png') no-repeat" 
  }); 
}, function() { 
  $(".yes-open-phone").animate({ 
    height: 'hide' 
  }, 300); 
  $(".contacts-tab").css({ 
    "border": "1px solid #fff" 
  }); 
  $(".open-phone").css({ 
    "background": "url('/style/img/open-phone.png') no-repeat" 
  }); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="contacts-tab" id="contacts-view">БЛОК 1</div> 
<div class="yes-open-phone" id="op-pc">БЛОК 2</div>

Буду благодарен за помощь. нужно именно на js или jquery, без css

Answer 1

Через mousemove и e.target получилось как-то так :

$(document).ready(function() { 
  $(document).on('mousemove', function(e) { 
    if ($(e.target).is('#contacts-view') || $(e.target).is('#op-pc')) { 
      if ($(".yes-open-phone").css('display') == 'none') 
        $(".yes-open-phone").animate({ 
          height: 'show' 
        }, 300); 
    } else { 
      if ($(".yes-open-phone").css('display') == 'block') 
        $(".yes-open-phone").animate({ 
          height: 'hide' 
        }, 300); 
    } 
  }); 
});

.contacts-tab { 
  border: 1px solid red; 
  height: 100px; 
  width: 100px; 
} 
 
.yes-open-phone { 
  border: 1px solid blue; 
  height: 100px; 
  width: 100px; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="contacts-tab" id="contacts-view">БЛОК 1</div> 
<div class="yes-open-phone" style="display:none;" id="op-pc">БЛОК 2</div>

Answer 2

Можно пойти от обрабтного и скрывать "блок 2" при наведении на ЛЮБОЕ место страницы, за исключением "блока 1" и "блока 2":

$('#contacts-view').on('mouseover', function() { 
  $(".yes-open-phone").slideDown(300); // раскрываем блок 
}); 
 
$(document).on('mouseover', function(e) { 
  if (!$('#contacts-view').is(e.target) && !$('.yes-open-phone').is(e.target)) { // если наводим не на #contacts-view и не на .yes-open-phone 
    $(".yes-open-phone").slideUp(300); // скрываем блок 
  } 
});

.contacts-tab, 
.yes-open-phone { 
  width: 100px; 
  height: 100px; 
} 
 
.contacts-tab { 
  border: #f00 solid 1px; 
} 
 
.yes-open-phone { 
  border: #000 solid 1px; 
  display: none; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="contacts-tab" id="contacts-view">БЛОК 1</div> 
<div class="yes-open-phone" id="op-pc">БЛОК 2</div>