Применить 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, время: 06:44. |