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);
  }
)
//...

jQuery图像翻转

1 个答案: