При наведении на картинку вывести панель (Див) под наведенной картинкой - JavaScript, Ajax

Newpitbull · 01.05.2013, 01:02

К примеру есть список с картинками <li>1</li> и тд. и есть <div> с классом по умолчанию display:none;
Мне нужно чтобы при наведении на картинку под `этой` активной картинкой появлялся этот <div>. Надо на jQuery это сделать.

У меня чего то не получается это сделать, получается только при наведении
у всех картинок появляется этот див, а мне нужно чтоб только у активной картинки он появлялся. Может подскажите как это сделать, ото не силен в js и jquery.
Пишу приложение по дипломной работе, работы много, а с этого места двинуться не получается и времени в обрез(.

_SanR · 01.05.2013, 11:07

Привет.
Если у тебя так:
$(div).show(); то дай дивам id и показывай по id.

А лучше кинь пример кода, чтобы можно было посмотреть что там у тебя.

mju · 01.05.2013, 19:19

&('li.my_li').mouseover(function (){
$(this).append("div.my_div")
}).mouseout(function(){
$(this).next('div.my_div').remove() ;
})

_SanR · 01.05.2013, 19:39

Код:

<html>
<head>
	<title>DIV</title>
	<meta charset="utf8">
	<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			$('li.my_li').mouseover(function (){
				$(".my_div").appendTo(this);
			});
			$('li.my_li').mouseout(function(){
				$(this).next('.my_div').empty() ;
			}) 			
		})
	</script>

</head>
<body>
	<ul>
		<li class = "my_li">1</li>
		<li class = "my_li">2</li>
		<li class = "my_li">3</li>
	</ul>
	<div class = "my_div">Мой див</div>
</body>
</html>

mju · 01.05.2013, 19:47

empty вроде очищает див а не удаляет

mju · 01.05.2013, 19:51

если добавляется ко всем попробуй как то так ( синтаксис не точный возможно)
&('li.my_li').each(function(){
$(this).mouseover(function(){
$(this).append("div.my_div")
}).mouseout(function(){
$(this).next('div.my_div').remove() ;
})
})

Newpitbull · 02.05.2013, 14:31

Привет ребята. Спасибо вам! Помогли с кодом)

01.05.2013, 01:02	#1
Newpitbull Пользователь Регистрация: 17.09.2011 Сообщений: 44	При наведении на картинку вывести панель (Див) под наведенной картинкой К примеру есть список с картинками <li>1</li> и тд. и есть <div> с классом по умолчанию display:none; Мне нужно чтобы при наведении на картинку под `этой` активной картинкой появлялся этот <div>. Надо на jQuery это сделать. У меня чего то не получается это сделать, получается только при наведении у всех картинок появляется этот див, а мне нужно чтоб только у активной картинки он появлялся. Может подскажите как это сделать, ото не силен в js и jquery. Пишу приложение по дипломной работе, работы много, а с этого места двинуться не получается и времени в обрез(.

01.05.2013, 19:19	#3
mju Новичок Джуниор Регистрация: 01.05.2013 Сообщений: 6	Как то так &('li.my_li').mouseover(function (){ $(this).append("div.my_div") }).mouseout(function(){ $(this).next('div.my_div').remove() ; })

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Показать картинку при наведении на строчку таблицы	MrBrain	HTML и CSS	7	25.09.2012 11:51
Динамичная панель - Можно ли сделать так чтобы панель или любой элемент, выдвигались при наведении	IHaveQuestions	Компоненты Delphi	7	30.11.2011 09:49
Всплывающая картинка при наведении на другую картинку	Z3rique	HTML и CSS	8	05.03.2011 22:40
Как получить картинку при наведении на другую картинку (ссылку)	seeker1	JavaScript, Ajax	8	04.07.2010 19:42
при наведении курсора на картинку - появляется увеличенная	staors	JavaScript, Ajax	1	28.07.2009 10:51

01.05.2013, 11:07	#2
_SanR Пользователь Регистрация: 09.02.2013 Сообщений: 48	Привет. Если у тебя так: $(div).show(); то дай дивам id и показывай по id. А лучше кинь пример кода, чтобы можно было посмотреть что там у тебя.

01.05.2013, 19:47	#5
mju Новичок Джуниор Регистрация: 01.05.2013 Сообщений: 6	empty вроде очищает див а не удаляет

01.05.2013, 19:51	#6
mju Новичок Джуниор Регистрация: 01.05.2013 Сообщений: 6	если добавляется ко всем попробуй как то так ( синтаксис не точный возможно) &('li.my_li').each(function(){ $(this).mouseover(function(){ $(this).append("div.my_div") }).mouseout(function(){ $(this).next('div.my_div').remove() ; }) })

02.05.2013, 14:31	#7
Newpitbull Пользователь Регистрация: 17.09.2011 Сообщений: 44	Привет ребята. Спасибо вам! Помогли с кодом)