Показать сообщение отдельно
  #1 (permalink)  
Старый 14.02.2013, 18: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)});
})
Ответить с цитированием