Вобщем такая заморочка. Допустим есть много элементов списка <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)});
})