Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 17.04.2018, 07:42
Аватар для Black_Star
Профессор
Отправить личное сообщение для Black_Star Посмотреть профиль Найти все сообщения от Black_Star
 
Регистрация: 11.07.2016
Сообщений: 285

Проверка на выход из двух областей?
Добрый день уважаемые. Появилась такая задача, как сделать проверку выхода курсора из области 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 только когда пользователь явно ушёл с области просмотра. А не как сейчас.
Ответить с цитированием
  #2 (permalink)  
Старый 17.04.2018, 08:35
Аватар для Белый шум
Профессор
Отправить личное сообщение для Белый шум Посмотреть профиль Найти все сообщения от Белый шум
 
Регистрация: 19.01.2012
Сообщений: 271

Black_Star, https://jsfiddle.net/y8joc3ur/10/
Ответить с цитированием
  #3 (permalink)  
Старый 18.04.2018, 22:15
Аватар для Black_Star
Профессор
Отправить личное сообщение для Black_Star Посмотреть профиль Найти все сообщения от Black_Star
 
Регистрация: 11.07.2016
Сообщений: 285

Спасибо, Белый шум Не полный айс, но уже лучше
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Проверка на существование сразу двух папок/файлов Sonya Серверные языки и технологии 23 01.11.2017 22:57
Пересечение и разность двух массивов harold Общие вопросы Javascript 9 18.12.2013 19:41
проверка формы не работает в ie begelme Javascript под браузер 6 13.08.2013 00:00
Проверка двух переменных в if fAmOus Элементы интерфейса 4 15.10.2012 22:15
скрипт для двух html запросов sergsao Общие вопросы Javascript 3 29.11.2011 11:50