Hover событие не распространяется на открываемый блок при наведении мыши на этот блок!?

Question

[Виталий]

Нужно, чтоб при наведении мыши на любой из элементов меню .nav_item появлялся единый блок .menu_hover , который, который лежит на одном уровне с самим меню. Единственное отличие при наведении на разные элементы меню: у блока .menu_hover должно быть свойство border-top: "цвет наведенного на элемент мыши". Появляться он должен с задержкой. Я в js/jquery аматор. Помогите пожалуйста.

html:

<div class="col-md-12 second_nav">
	<a href="#">
		<div class="col-md-3 col-sm-6 <b>nav_item</b>">
			<img src="img/nav1.png" alt="">Детские игрушки
		</div>
	</a>
	<a href="#">
		<div class="col-md-3 col-sm-6 <b>nav_item</b>">
			<img src="img/nav2.png" alt="">Для улицы
		</div>
	</a>
	<a href="#">
		<div class="col-md-3 col-sm-6 nav_item">
			<img src="img/nav3.png" alt="">Детская мебель
		</div>
	</a>
	<a href="#">
		<div class="col-md-3 col-sm-6 nav_item">
			<img src="img/nav4.png" alt="">Новорожденным
		</div>
	</a>
</div>
<div class="menu_hover">
        здесь контент на всю ширину div.second_nav независимо от того, на какой div.nav_item я     навожу мышью
</div>

css:

.menu_hover {
        display: none;
}

js:
1 вариант:

$( '.nav_item' , this).hover(function(){
	$('.menu_hover').delay(1000).slideDown()
	}, function(){
		$( '.menu_hover').hide()
});

2 вариант(по сути тоже самое):

$('.nav_item, .menu_hover').mouseover(function(){
	$('.menu_hover').delay(1000).slideDown();
});
$('.nav_item, .menu_hover').mouseout(function(){
	$('.menu_hover').hide();
});

Answer 1

[Сергей Горностаев]

Так?

$(document).ready(function() {
  if($(document).width() > 992) {
    $('.nav_item').hover(function() {
      var color = $(this).css('background-color');
      $('.menu_hover').css('border-top-color', color).clearQueue().delay(500).slideDown();
    }, function() {
      $('.menu_hover').clearQueue().delay(500).slideUp();
    });

    $('.menu_hover').hover(function() {
      $('.menu_hover').clearQueue().delay(500).slideDown();
    }, function() {
      $('.menu_hover').clearQueue().delay(500).slideUp();
    });
  }
});

https://jsfiddle.net/TheDeadOne/Labtnatx/1/

Comments

[Виталий]

да, но при наведении мыши на всплывающий блок, он не должен исчезать. То есть mouseOver и на него должен распространяться.

[Сергей Горностаев]

vetalsd2: исправил ответ.

[Виталий]

Сергей Горностаев: спасибо огромное. Все работает. Вот хдесь не подскажете? По теме Как реализовать событие click?

Answer 2

[Виталий]

да, но при наведении мыши на всплывающий блок, он не должен исчезать. То есть mouseOver и на него должен распространяться.
+ И буду благодарен, если подскажете, как отменить это событие при размере экрана меньше 992px. То есть на дисплеях < 992px должно работать другое событие. Не hover, a, скажем, click.
Так как на сенсорных устройствах hover не уместен