Не буду засорять раздел и задам ещё один вопрос здесь:
<article>
<div class="magic-box">
<a href="#"><img src="img/green.jpg" alt="concert.jpg" /></a>
<p><a href="#">competition</a></p>
</div>
<h2><a href="#">Win tickets to Rock en Seine with</a></h2>
<h6><a href="#">written by: <span>Mike Shaw</span> published on <span>August 02 2011</span></a></h6>
<p><a href="#">Radio stations and TV music channels are all well and good, but they tend to be a little bit insular.
They will cover a little bit of new music, but 99% of the time its from British or American artists – meanwhile the rest of
the world is out there making...</a></p>
</article>
<article>
<div class="magic-box">
<a href="#"><img src="img/green.jpg" alt="concert.jpg" /></a>
<p><a href="#">competition</a></p>
</div>
<h2><a href="#">Win tickets to Rock en Seine with</a></h2>
<h6><a href="#">written by: <span>Mike Shaw</span> published on <span>August 02 2011</span></a></h6>
<p><a href="#">Radio stations and TV music channels are all well and good, but they tend to be a little bit insular.
They will cover a little bit of new music, but 99% of the time its from British or American artists – meanwhile the rest of
the world is out there making...</a></p>
</article>
<article>
<div class="magic-box">
<a href="#"><img src="img/green.jpg" alt="concert.jpg" /></a>
<p><a href="#">competition</a></p>
</div>
<h2><a href="#">Win tickets to Rock en Seine with</a></h2>
<h6><a href="#">written by: <span>Mike Shaw</span> published on <span>August 02 2011</span></a></h6>
<p><a href="#">Radio stations and TV music channels are all well and good, but they tend to be a little bit insular.
They will cover a little bit of new music, but 99% of the time its from British or American artists – meanwhile the rest of
the world is out there making...</a></p>
</article>
Мне нужно, чтобы при наведении на Img подсвечивался h2( а в последующем при наведении на h2 подсвечивался img, при наведении на p подсвечивались и h2 и img). Пишу:
$(function(){
var img = $(this).('.magic-box').find('img');
var header = $(this).('article').find('h2 a');
$('.magic-box').hover(function(){
$(this).animate({"background-color":"#000"}, 300),
header.animate({"color":"#ddd"}, 300);
}, function(){
$(this).animate({"background-color":"#fff"}, 300),
header.animate({"color":"#000"}, 300);
})
})
Однако ничего не анимируется. Что не так? кривые селекторы? Мои руки?