Как «задержать» div, который появляется при наведении?

Question

[abbrakadabbra]

Написал пример здесь: https://jsfiddle.net/uq6218wy/3/
Играл много, но получается не то что нужно, а хочу сделать, чтобы при наведении курсора на ссылку Mouseenter появлялся блок social, в котором можно было спокойно водить мышь и он не скрывался.

Сейчас он сразу скрывается, если мышь ушла за границы ссылки Mouseenter.. Не понимаю где косяк, подскажите.

Answer 1

[Олег]

Может так ;) без Js на голом css https://jsfiddle.net/joomla/b0j1pcoa/

Comments

[fsockopen]

круто

[abbrakadabbra]

Так и сделал.

Answer 2

[fsockopen]

$("#trigger").on({
  mouseenter: function() {
    $(".list").css("opacity", "0");
    $(".social").show();
  },
  mouseleave: function(event) {
   var el = event.target;
   $(el).closest(".container").find(".social").hide();
   $(".list").css("opacity", "1");
  	console.log(event.target);
  }
});

и вот тебе радость

Answer 3

[Олег]

https://jsfiddle.net/uq6218wy/5/ Еще нужно кнопку добавить, чтобы пользователь мог закрыть, если ему это не интересно.

Comments

[Kovalsky]

То есть по сути проблема была в том, что ссылка была на верхнем по отношению к .social слое?

[Олег]

Никита Полевой: У вас был обработчик наведения/удаления на #trigger, а .social отдельный блок, поэтому при удалении курсора с #trigger блок скрывался, я немного изменил код и повесил mouseleave на общего родителя .social и #trigger.

[Kovalsky]

Олег: ну на самом деле это не у меня) Вопрос не мой

А зачем вы задали z-index: 3;? Он вроде бы ничего не меняет - я удаляю, ничего не меняется

[abbrakadabbra]

Никита Полевой: просто наведите на mouseenter. Сверху должен появится блок social, а ссылки скрыться. При этом должна быть возможность водить по всей площади появившегося блока social, а не только на ширину ссылки mouseenter (обратите внимание: чуть влево\вправо срабатывает mouseleave).

Answer 4

[Сергей]

hoverintent jquery plugin
cherne.net/brian/resources/jquery.hoverIntent.html