JQuery Image Rollover

Question

Я пытаюсь отобразить определенное изображение, когда кто-то наводит курсор мыши на ссылку в навигационной панели. Я использую простой скрипт jQuery, но он не будет работать с классом, с которым мне нужно работать. Вот скрипт, который я использую:

<script type="text/javascript">
$(document).ready(function(){
$(".image_second").css({'opacity':'0'});
$(".image_third").css({'opacity':'0'});
$('.first').hover(
function() {
$(this).find('.image_first').animate({opacity: 1}, 100);
},
function() {
$(this).find('.image_second').fadeTo(100, 0);
},
function() {
$(this).find('.image_third').fadeTo(100, 0);
}
)
$('.second').hover(
function() {
$(this).find('.image_second').fadeTo(100, 1);
},
function() {
$(this).find('.image_first').fadeTo(100, 0);
},
function() {
$(this).find('.image_third').fadeTo(100, 0);
}
)
$('.third').hover(
function() {
$(this).find('.image_third').fadeTo(100, 1);
},
function() {
$(this).find('.image_first').fadeTo(100, 0);
},
function() {
$(this).find('.image_second').fadeTo(100, 0);
}
)
});
</script>

Хорошо, ссылки на панель навигации - это первый, второй и третий класс. Изображение, которое я хочу показать при наведении ссылки, - это .image_first, .image_second и .image_third. Вот код навигационной панели:

<ul class="second_nav">
<a href=""><li class="first">Peak Coaching</li></a>
<a href=""><li class="second">Consulting &amp; Training</li></a>
<a href=""><li class="third">Peak Adventures</li></a>
</ul>

Вот div с изображениями:

<ul class="home_images">
<li><img class="image_first" src="<?php bloginfo('template_directory'); ?>/images/peak_image.jpg" alt="Peak Coaching" width="640" height="350" /></li>
<li class="image_second"><img src="<?php bloginfo('template_directory'); ?>/images/peak_image2.jpg" alt="Peak Coaching" width="640" height="350" /></li>
<li class="image_third"><img src="<?php bloginfo('template_directory'); ?>/images/peak_image3.jpg" alt="Peak Coaching" width="640" height="350" /></li>
</ul>

Если я заменю любой из классов nav (первый, второй, третий) другим случайным классом div, скрипт будет работать. К сожалению, это не работает с классами, с которыми я хочу работать. Есть идеи?

Answer 1

Вы не должны использовать $(this).find(...), а должны изменить его на $('#home_images')

//...
$('.first').hover(
  function() {
    $('#home_images').find('.image_first').animate({opacity: 1}, 100);
  },
  function() {
    $('#home_images').find('.image_second').fadeTo(100, 0);
  },
  function() {
    $('#home_images').find('.image_third').fadeTo(100, 0);
  }
)
//...