Javascript.RU

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

Применить css к DOM элементу через n-колено
Вобщем такая заморочка. Допустим есть много элементов списка <li>. В каждом элементе списка куча блоков (Шмель прилагается). Я хочу чтоб при наведении мышки на элемент списка, менялось свойство "top:0px" блока с классом main-section-info на "top:-150px" и только у этого элемента списка. А другие чтоб были без изменения. Вобщем на какой элемент списка наводишь, только в нем и меняется. Я так понимаю нужно работать с Jquery свойством this. Но как обратиться к N-ному колену DOM списка к блоку с классом main-section-info , никак не могу понять. Последнее до чего дошел, скрипт внизу



...<li><div class="main-section">
    <span class="main-section-stat">New</span>
  <a href="...">
  <div class="inner-wrapper">
      <header class="main-section-preview">
          <h2><span class="main-section-title">бла бла бла</span></h2>
      </header>
      <section class="main-section-info"><!-- нужно свойство менять для этого дива -->
        <div class="main-section-image">
          <img src="блаблабла.jpg">
        </div>
        <div class="main-section-description">
          <p>
 бла бла бла
 </p>
        </div>
      </section>
    </div>
  </a>
</div></li>

<li><div class="main-section">
    <span class="main-section-stat">New</span>
  <a href="...">
  <div class="inner-wrapper">
      <header class="main-section-preview">
          <h2><span class="main-section-title">бла бла бла</span></h2>
      </header>
      <section class="main-section-info"><!-- нужно свойство менять для этого дива -->
        <div class="main-section-image">
          <img src="блаблабла.jpg">
        </div>
        <div class="main-section-description">
          <p>
 бла бла бла
 </p>
        </div>
      </section>
    </div>
  </a>
</div></li>...


$(document).ready(function(){
$('li').hover(function(){
	$(this).parent().next('.main-section-info').animate({
		top:'-150px'
		},200)},function(){
		$(this).parent().next('.main-section-info').animate({
		top:'0px'
		},200)});
})
Ответить с цитированием
  #2 (permalink)  
Старый 14.02.2013, 21:24
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

все дети - внуки $("#main-section-info").children()

если внуки и дети лишь по одному - то
$("#main-section-info").children().eq(0) - 1-й ребенок
$("#main-section-info").children().eq(1) - внук

Последний раз редактировалось Deff, 14.02.2013 в 21:31.
Ответить с цитированием
  #3 (permalink)  
Старый 14.02.2013, 21:37
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,068

Sherminator,
$(function(){
$('li').mouseenter(function(){
	$(this).find('.main-section-info').stop().animate({
		top:'-150px'
		},200)}).mouseleave(function(){
		$(this).find('.main-section-info').stop().animate({
		top:'0px'
		},200)});
})
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Присвоить элементу стиль с атрибутом media="print" через javascript x3zone Events/DOM/Window 1 19.10.2012 09:37
Подключение другого CSS при выводе через IFRAME Smokvin Events/DOM/Window 7 16.07.2012 12:03
Подключение CSS через <link> Vit (X)HTML/CSS 8 27.05.2012 02:40
Невозможно обратиться к только что вставленному элементу DOM Vovan91 jQuery 6 19.01.2012 14:59
Как добавить элемент в XML через DOM используя PHP? bayah Серверные языки и технологии 6 11.08.2010 13:33