Javascript.RU

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

Обращение к отдельным дочерним элементам <div>
возможно вопрос совсем глупый, выдающий во мне полнейшего новичка, коим я и являюсь,но все же:
имеется <div id="news">, содержащий в себе несколько дочерних <div>-ов
<div id="news">
	       <div id="news-1"  class="newsImage" >
			<h3>News</h3>
			<p>Text</a></p>
		 </div>
		 <div id="news-2"  class="newsImage">
			<h3>News</h3>
			<p>text</p>
			<p><a href="#">Learn more...</a></p>
		  </div>
		  <div id="news-3"  class="newsImage">
			<h3>News</h3>
			<p>text</p>
			<p><a href="#">Learn more...</a></p>
		  </div>
                  <div id="news-4" class="newsImage">
			<h3>News</h3>
			<p>text</p>
			<p><a href="#">Learn more...</a></p>
		  </div>
                  <div id="news-5" class="newsImage">
			<h3>News</h3>
			<p>text</p>
			<p><a href="#">Learn more...</a></p>
		  </div>
</div>


Задача в том, чтобы в случае event-а .hover происходило изменение ширины <div> класса ".newsImage" и появление ранее невидимых (visibility:hidden) параграфов <p> именно в том блоке <div> на который наведен указатель мыши

$('.newsImage').hover(
	function(){
	 $('.newsImage').width('16%');
	 $(this).width('30%');
        $('.newsImage p').css('visibility','visible');
	 },
	 function(){
		 $('.newsImage').width('20%');
                 $('.newsImage p').css('visibility','hidden');
	 }
	);


Но, как вы догадываетесь при наведении мыши на блок становятся видны параграфы <p> во всех блоках класса class="newsImage", а не только в том на которой навели мышь.

Вопрос: можно ли как нибудь изолировать нужные параграфы используя "this" и обращаться только к тому, который находится в активном блоке <div>??

Последний раз редактировалось kreker, 28.09.2015 в 15:32.
Ответить с цитированием
  #2 (permalink)  
Старый 28.09.2015, 15:34
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,105

kreker,
$(function(){
      $('.newsImage').hover(
	function(){
	 $('.newsImage').width('16%');
	 $(this).width('30%');
        $('p', this).show();
	 },
	 function(){
		 $('.newsImage').width('16%');
         $('p', this).hide();
	 }
	);

});
Ответить с цитированием
  #3 (permalink)  
Старый 28.09.2015, 15:37
Новичок на форуме
Отправить личное сообщение для kreker Посмотреть профиль Найти все сообщения от kreker
 
Регистрация: 28.09.2015
Сообщений: 5

Спасибо за отклик, теперя ясно как иерархия описывается в jQuerry. С Вашим вариантом и селектор visibility не нужен
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Обращение к динамически созданным элементам. platedz Элементы интерфейса 36 04.10.2012 13:04
Обращение к элементам с неизвестным id gJam Events/DOM/Window 21 02.08.2012 17:26
JQuery После клонирования по id обращение к элементам клона mirek Общие вопросы Javascript 21 07.06.2012 20:02
Несколько одинаковых таблиц. Обращение к отдельным элементам в них. zaytsewa Элементы интерфейса 7 11.11.2010 09:08
Обращение к элементам сайта Воитель Элементы интерфейса 6 20.08.2009 11:26