Добрый день уважаемые. Появилась такая задача, как сделать проверку выхода курсора из области 2-х полей? Приведу пример
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<style>
.bl_catalogProducts__link {
display: block;
width: 100%;
height: 100%;
font-family: "TahomaBold", sans-serif;
font-size: 15px
}
.added_catalog {
position: absolute;
top: 66px;
left: 0;
width: 100%;
min-height: 560px;
background-color: #fff;
border: 1px solid #1162ab;
z-index: 2
}
.added_catalog__section {
display: none;
position: relative;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
width: 100%;
height: 100%
}
.added_catalog__section.active {
display: -webkit-flex;
display: -ms-flexbox;
display: flex
}
.added_catalog__item {
display: inline-block;
min-height: 208px;
min-width: 100px;
box-sizing: border-box;
padding: 16px 0 0;
margin-bottom: 10px;
border: 1px solid #f1f1f1
}
.added_catalog__item:hover {
transition: .2s color;
border-color: #1162ab
}
.added_catalog__item a {
display: block;
width: 100%;
text-align: center;
color: #1162ab;
transition: .2s color
}
.added_catalog__item a:focus,
.added_catalog__item a:hover {
color: #de0914;
text-decoration: none;
transition: .2s color
}
.added_catalog__item p {
font-size: 19px;
line-height: 18px
}
.added_catalog__item img {
text-align: center
}
.bl_catalogProducts {
width: 100%;
min-height: 555px;
background-color: #fff
}
.title_name {
margin-top: 0;
vertical-align: top;
margin-bottom: 0;
text-align: left;
color: #333;
font-family: "TahomaBold", sans-serif;
font-size: 18px
}
.bl_catalogProducts__title {
display: block;
width: 100%;
line-height: 35px;
padding: 15px 5px 15px 20px;
border-bottom: 1px solid #eee;
font-size: 24px;
font-family: "TahomaBold", sans-serif
}
.bl_catalogProducts__full {
display: block;
width: 100%;
padding: 13px 20px 0
}
.bl_catalogProducts__item {
margin-top: 23px;
width: 110%
}
.bl_catalogProducts__item:nth-of-type(1) {
margin-top: 0
}
.bl_catalogProducts__item:hover {
text-decoration: underline
}
.bl_catalogProducts__link {
display: block;
width: 100%;
height: 100%;
font-family: "TahomaBold", sans-serif;
font-size: 15px
}
</style>
</head>
<body>
<div class="col-md-3 hidden-sm hidden-xs">
<div class="bl_catalogProducts">
<p class="title_name bl_catalogProducts__title hidden-sm hidden-xs">Каталог товаров</p>
<ul class="bl_catalogProducts__full">
<li class="bl_catalogProducts__item"><a class="bl_catalogProducts__link">УДИЛИЩА</a></li>
<li class="bl_catalogProducts__item"><a class="bl_catalogProducts__link">КАТУШКИ</a></li>
<li class="bl_catalogProducts__item"><a class="bl_catalogProducts__link">ЛЕСКИ И ШНУРЫ</a></li>
<li class="bl_catalogProducts__item"><a class="bl_catalogProducts__link">ПРИМАНКИ</a></li>
<li class="bl_catalogProducts__item"><a class="bl_catalogProducts__link">МОНТАЖ</a></li>
<li class="bl_catalogProducts__item"><a class="bl_catalogProducts__link">АКСЕССУАРЫ</a></li>
<li class="bl_catalogProducts__item"><a class="bl_catalogProducts__link">ПРИКОРМКИ И НАСАДКИ</a></li>
<li class="bl_catalogProducts__item"><a class="bl_catalogProducts__link">ЗИМНЯЯ РЫБАЛКА</a></li>
<li class="bl_catalogProducts__item"><a class="bl_catalogProducts__link">КЕМПИНГ</a></li>
<li class="bl_catalogProducts__item"><a class="bl_catalogProducts__link">ЭКИПИРОВКА</a></li>
<li class="bl_catalogProducts__item"><a class="bl_catalogProducts__link">НАБОРЫ</a></li>
<li class="bl_catalogProducts__item"><a class="bl_catalogProducts__link">Подарочные сертификаты</a></li>
</ul>
</div>
</div>
<div class="col-md-9">
<!-- Количество added_catalog__section должно соотвецтвовать количеству bl_catalogProducts__item-->
<nav class="added_catalog hidden">
<ul class="added_catalog__section">
<li class="added_catalog__item">
<a href="#">
<p>Один</p>
<img src="https://github.com/BlackStar1991/Pictures-for-sharing-/blob/master/smiles/relax.jpg?raw=true" alt="Один">
</a>
</li>
<li class="added_catalog__item">
<a href="#">
<p>Один</p>
<img src="https://github.com/BlackStar1991/Pictures-for-sharing-/blob/master/smiles/relax.jpg?raw=true" alt="Один">
</a>
</li>
<li class="added_catalog__item">
<a href="#">
<p>Один</p>
<img src="https://github.com/BlackStar1991/Pictures-for-sharing-/blob/master/smiles/relax.jpg?raw=true" alt="Один">
</a>
</li>
<li class="added_catalog__item">
<a href="#">
<p>Один</p>
<img src="https://github.com/BlackStar1991/Pictures-for-sharing-/blob/master/smiles/relax.jpg?raw=true" alt="Один">
</a>
</li>
<li class="added_catalog__item">
<a href="#">
<p>Один</p>
<img src="https://github.com/BlackStar1991/Pictures-for-sharing-/blob/master/smiles/relax.jpg?raw=true" alt="Один">
</a>
</li>
<li class="added_catalog__item">
<a href="#">
<p>Один</p>
<img src="https://github.com/BlackStar1991/Pictures-for-sharing-/blob/master/smiles/relax.jpg?raw=true" alt="Один">
</a>
</li>
</ul>
<ul class="added_catalog__section">
<li class="added_catalog__item">
<a href="#">
<p>Second</p>
<img src="https://github.com/BlackStar1991/Pictures-for-sharing-/blob/master/smiles/relax.jpg?raw=true" alt="Один">
</a>
</li>
<li class="added_catalog__item">
<a href="#">
<p>Second</p>
<img src="https://github.com/BlackStar1991/Pictures-for-sharing-/blob/master/smiles/relax.jpg?raw=true" alt="Один">
</a>
</li>
<li class="added_catalog__item">
<a href="#">
<p>Second</p>
<img src="https://github.com/BlackStar1991/Pictures-for-sharing-/blob/master/smiles/relax.jpg?raw=true" alt="Один">
</a>
</li>
</ul>
<ul class="added_catalog__section">
<li class="added_catalog__item">
<a href="#">
<p>Tree</p>
<img src="https://github.com/BlackStar1991/Pictures-for-sharing-/blob/master/smiles/relax.jpg?raw=true" alt="Один">
</a>
</li>
<li class="added_catalog__item">
<a href="#">
<p>Tree</p>
<img src="https://github.com/BlackStar1991/Pictures-for-sharing-/blob/master/smiles/relax.jpg?raw=true" alt="Один">
</a>
</li>
<li class="added_catalog__item">
<a href="#">
<p>Tree</p>
<img src="https://github.com/BlackStar1991/Pictures-for-sharing-/blob/master/smiles/relax.jpg?raw=true" alt="Один">
</a>
</li>
</ul>
</nav>
</div>
<script>
(function addedCatalog() {
var active = "active",
itemCatalog = $('.bl_catalogProducts__item'),
fieldAddedCatalog = $(".added_catalog"),
addedSection = $(".added_catalog__section");
itemCatalog.hover(
function() {
addedSection.removeClass(active);
var currentIndex = $(this).index();
fieldAddedCatalog.removeClass("hidden");
addedSection.eq(currentIndex).addClass(active);
},
function() {
var visitedField = $(".bl_catalogProducts__full, .added_catalog__section.active");
visitedField.mouseleave(function() {
setTimeout(function() {
fieldAddedCatalog.addClass("hidden");
}, 1500);
});
});
}());
</script>
</body>
</html>
https://jsfiddle.net/2mh3vh1x/3/ (*меню видно на разрешении >991px)
Задача следующая - Если навести курсором на ссылку (в примере делал для первых трех), открывается доп поля с ссылками. Но если курсор перевожу из области первой ссылки в область второй, то поле с доп ссылками исчезает через 1,5сек. Как это исправить? То есть я хочу чтоб added_catalog присваивался класс hidden только когда пользователь явно ушёл с области просмотра. А не как сейчас.
Не полный айс, но уже лучше
