@nikkon82

Как сделать появление блока при наведении мыши?

Добрый день!
Не силен в JS или Jquery - прошу помощи)

Есть выпадающее меню, пример:

//выпадающее меню
<div class="seo-row"> // Главное меню, располагается слева
        <a  href=""  data-block="menu-59">Пункт меню</a>
        <a  href=""  data-block="menu-60">Пункт меню</a>
        <a  href=""  data-block="menu-61">Пункт меню</a>
</div>
<div class="seo-content"> // подменю, появляется при наведении на ссылки в главном меню
   <div class="menu menu-59">
      <a href="">Подменю</a>
   </div>
   <div class="menu menu-60">
      <a href="">Подменю</a>
   </div>
   <div class="menu menu-61">
      <a href="">Подменю</a>
   </div>
</div>


Стили:
.menu{padding: 20px 40px;position:absolute;visibility:hidden;opacity:0;transition: 0s 0.2s;}
.menu.active{transition-delay: 0.2s;visibility: visible;opacity: 1;}


Надо чтобы при наведении, например на Пункт меню с data-block="menu-59", появлялось Подменю с классом menu-59.
При этом, чтобы при выпадании Главного меню - первый блок Подменю с классом menu-59 был изначально активен.

На JQuery сделал пока так:

var $activeblock = $('.menu');
	$activeblock.first().addClass('active');
	
	$('.seo-row > a').hover(function() {
		var block = $(this).data('block');
		$('.' + block).addClass('active');
	}, function() {
		var block = $(this).data('block');
		$('.' + block).removeClass('active');
	});


но проблема в том, что:
1. При попытке перейти в появившееся подменю - оно исчезает - видимо надо какую то задержку или еще что в коде jquery дописать правильно, т.е. надо чтобы не исчезало и в появившемся подменю можно было что-то выбрать, а исчезало только при наведении на другую ссылку в Главном Меню
2. При исчезновении Главного меню и при его повторном выпадании - снова был активен первое Подменю
  • Вопрос задан
  • 1006 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы