Как написать условие на проверку наведён ли курсор на элемент в JavaScript?

Question

[Иван Иванов]

Суть в следующем, есть элемент, при наведении на который у второго элемента меняется состояние с display:none на block;
При уходе курсора с этого элемента, соответственно меняется состояние с block на none;
Как сделать так, что бы при переходе курсора на второй элемент, он не исчезал? Ну что-то типа, если курсор не наведен ни на первый, ни на второй элемент, тогда второй элемент display:none; Вот пример кода, помогите допилить пожалуйста:

var cartList = document.getElementById('cart-list');  // это элемент который должен исчезать и появлятся
   cartList.style.display="none";                                    // задаем ему изначальное состояние
   
  $('.cart-link-img').mouseover(function() {               // если навели на элемент №1 
     cartList.style.display="block";                             // элемент №2 стал видим
  })
  .mouseout(function() {                                           // если убрали курсор с элемента №1 
     cartList.style.display="none";                              // элемент №2 стал невидим
  });

Answer 1

[Павел]

так добавьте просто второй элемент аналогично

$('.cart-link-img').mouseover(function() {               // если навели на элемент №1 
     cartList.style.display="block";                             // элемент №2 стал видим
  })

Comments

[Иван Иванов]

А разве так правильно делать? Я думал об этом, но мне показалось это не правильным решением, так как есть возможность что блок будет моргать? Щас попробую

[Павел]

Иван Иванов, а вы покажите ваши блоки, то мы как котята слепые

[Иван Иванов]

ci54867.tmweb.ru/katalog вот при наведении на корзину в правом углу в шапке.

Сделал вот так:

var cartList = document.getElementById('cart-list');
	cartList.style.display="none";
   $('.cart-link-img').mouseover(function() {
     cartList.style.display="block";
  })
  .mouseout(function() {
	  $(cartList).mouseover(function() {
		cartList.style.display="block";
	  })
	  .mouseout(function() {
		 cartList.style.display="none";
	  });
  });

но тогда не исчезает блок, если мы навели на значок корзины и сразу убрали.

[Павел]

Иван Иванов, на странице нет #cart-list

[Иван Иванов]

[Павел]

Иван Иванов, стоило сказать что нужно добавить товар в корзину и тогда этот id появится

[Иван Иванов]

mrusklon, прошу прощения, просто уже голова к вечеру не варит )))

[Павел]

я бы сделал у cart-list
top: -22px;
padding-top: 50px;
как вариант
или задержку по времени можно поставить но это будет немного странно )

[Иван Иванов]

mrusklon, Спасибо большое! Работает! Странно просто как так то? Хотя в принципе не важно, главное результат. Хотя я думал это можно реализовать как то по средствам JS

[Иван Иванов]

mrusklon, только одна проблема, курсор не дотягивается до "Оформить заказ" =(

[Павел]

Иван Иванов,
cart-list
z-index: 100;

[Иван Иванов]

mrusklon, Так и сделал ))) Спасибо работает ))) отмечу ваш вариант решением. Хотя хотелось бы всё таки узнать как делать такое по средствам JS.

[Павел]

Иван Иванов, ну для js вы как нибудь точнее сформируйте задачу :)

[Иван Иванов]

mrusklon, так все та же задача )))

1) Если навели на cart-link-img блок cart-list появился
2) Если курсор ушёл с cart-link-img, но перешёл на блок cart-list блок остается, иначе исчезает.

[Павел]

Иван Иванов, с точки зрения логики там есть "просвет" и чтоб его миновать надо по наведению на корзину делать какую нибудь область без просвета , что мы и сделали на css , как я еще говорил можно на js поставить задержку , чтоб пока пользователь ведет курсор к товару , он не закрылся

[Иван Иванов]

mrusklon, понял ) ну ваш вариант мне подошёл, а это главное)) Буду повышать скилл! Вы мне очень помогли! Спасибо вам огромное!

[Bhudh]

[GN-off]@ZZiliST, предлог «посредством чего-то» пишется именно так, это жить можно "по средствам" или "не по средствам".[/GN-off]