jQuery 图像翻转

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>

如果我用另一个随机 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);
  }
)
//...