Применить 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)}); }) |
все дети - внуки $("#main-section-info").children()
если внуки и дети лишь по одному - то $("#main-section-info").children().eq(0) - 1-й ребенок $("#main-section-info").children().eq(1) - внук |
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:19. |