Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 08.02.2016, 22:40
Новичок на форуме
Отправить личное сообщение для tot_kotoryi Посмотреть профиль Найти все сообщения от tot_kotoryi
 
Регистрация: 08.02.2016
Сообщений: 1

Jquery Скрыть/Показать блок при наведении
Здравствуйте, недавно начал изучать javascript с Jquery, сделал меню и 2 скрытых блока и хочу что бы при наведении на ссылку появлялся нужный блок, но почему то он начинает вести себя не так как мне нужно, скрывается и появляется не успев даже навести курсор на блок. Помогите понять как сделать так что бы при наведении на ссылку появлялся блок и не пропадал когда курсор пропадает с ссылки, а при наведении на другую ссылку, появлялся другой блок и пропадал предыдущий блок, не помогает даже задержка. И как сделать компактный код что бы не писать на каждую кнопку новую функцию. Спасибо.
<div class="mn_1" style="display:none;"> block 1</div>
<div class="mn_2" style="display:none;"> block 2</div>	
	<ul>
		<li class="m_1"><a href="#">Menu 1</a></li>
		<li class="m_2"><a href="#">menu 2</a></li>
	</ul>

$(function(){
	$('.m_1').hover(function(){
	  $('.mn_1').show(1000);
	   },
	   function(){
		$('.mn_1').hide(1000);
		  });
});
$(function(){
	$('.m_2').hover(function(){
	  $('.mn_2').show(1000);
		},
	   function(){
		 $('.mn_2').hide(1000);
		   });
});
Ответить с цитированием
  #2 (permalink)  
Старый 08.02.2016, 23:15
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

tot_kotoryi,
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">

  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script>
   $(function(){
$(".m").mouseenter(function() {
   var  i = $(".m").index(this);
   $(".mn").stop().not($(".mn").eq(i).show()).hide()
})
   })
  </script>
</head>

<body>

<div class="mn" style="display:none;"> block 1</div>
<div class="mn" style="display:none;"> block 2</div>
	<ul>
		<li class="m"><a href="#">Menu 1</a></li>
		<li class="m"><a href="#">menu 2</a></li>
	</ul>




</body>

</html>
Ответить с цитированием
Ответ


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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Событие onmouseout при наведении мышки на дочерний элемент фонарик Общие вопросы Javascript 2 26.01.2016 14:01
Изменения высоты блока при наведении курсора optron Общие вопросы Javascript 2 28.10.2015 22:24
Подружить два скрипта (скроллер+скрипт эффекта при наведении) Che jQuery 26 29.08.2012 10:59
Как сделать, чтобы при наведении на кнопку справа от нее появлялись текстовые ссылки? Tass Общие вопросы Javascript 7 17.02.2011 09:06
изменения рисунка при наведении курсора Kenan Bek Events/DOM/Window 24 19.12.2010 20:48