Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Применить css к DOM элементу через n-колено (https://javascript.ru/forum/events/35569-primenit-css-k-dom-ehlementu-cherez-n-koleno.html)

Sherminator 14.02.2013 18:42

Применить 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)});
})

Deff 14.02.2013 19:24

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

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

рони 14.02.2013 19:37

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)});
})


Часовой пояс GMT +3, время: 05:55.