jQuery的：鼠标悬停无法正常工作

Question

请打开这个网站

http://intelmarketing.mk/demos/security/

，并在该网站的底部用鼠标在走，你会看到3个图像与标题

现在试着用鼠标去标题，它假设显示红色框。我对最后一个标题有问题。当我去最后一个标题的jQuery脚本不起作用，我不知道为什么你们可以看到并帮助我，我做错了什么？

这里是代码：

<?php 
    $recentPosts = new WP_Query(); 
    $recentPosts->query('showposts=3'); 
?> 
<?php 
    while ($recentPosts->have_posts()) : $recentPosts->the_post(); ?> 
    <div class="box"> 
     <div class="slice"> 
     <?php echo get_the_post_thumbnail($post_id, $size, $attr); ?></div> 
<script> 
    jQuery('.titlebox1').hover(function() 
    { 
    jQuery(this).find('.posttext').fadeIn(500); 
    jQuery(this).find('.titlebox').fadeOut(500); 
    },function() 
    { 
    jQuery(this).find('.posttext').fadeOut(500); 
    jQuery(this).find('.titlebox').fadeIn(500); 
    }); 
</script> 

<div class="titlebox1"> 
    <h3 class="titlebox"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3> 
    <div class="posttext"> 
     <h3 class="date"><?php the_time('M d, Y') ?></h3> 
     <?php the_excerpt(); ?> 
    </div> 
</div> 
    </div> 
<?php endwhile; ?> 

谢谢！

Answer 1

这是因为您正在为hoverbox追加3次脚本。这里单个框的HTML：

<div class="box"> 
    <div class="slice"><img width="339" height="332" src="http://intelmarketing.mk/demos/security/wp-content/uploads/2014/05/n2.png" class="attachment- wp-post-image" alt="n2"></div> 
     <script> 
      jQuery('.titlebox1').hover(function(){ 
      jQuery(this).find('.posttext').fadeIn(500); 
      jQuery(this).find('.titlebox').fadeOut(500); 
      },function(){ 
      jQuery(this).find('.posttext').fadeOut(500); 
      jQuery(this).find('.titlebox').fadeIn(500); 
      }); 

     </script> 
     <div class="titlebox1"><h3 class="titlebox" style="display: block;"><a href="http://intelmarketing.mk/demos/security/why-do-we-use-it-2/">Why do we use it?</a></h3> 
      <div class="posttext" style="display: none;"> 
       <h3 class="date">May 22, 2014</h3> 
       <p>It is a long established fact that a reader will be… </p> 
       <p> <a href="http://intelmarketing.mk/demos/security/why-do-we-use-it-2/">LÆS MERE</a></p> 
      </div> 
     </div> 
    </div> 
</div> 

正如你所看到的，你有一个脚本标记。这个脚本附加了3次，这是不好的，但这里不是问题。该脚本在titlebox1之前。因此，为了在添加第一个脚本的时候，它在一无所有的情况下绑定一个事件。第二次，它绑定在第一次和第三次，它绑定在第一个和第二个。

所以最后，box 1有2个事件，box 2有1个事件，最后box 3没有。

把你的代码的头部，并添加一个DOM准备处理程序：

jQuery(document).ready(function(){ 
    jQuery('.titlebox1').hover(function() 
    { 
    jQuery(this).find('.posttext').fadeIn(500); 
    jQuery(this).find('.titlebox').fadeOut(500); 
    },function() 
    { 
    jQuery(this).find('.posttext').fadeOut(500); 
    jQuery(this).find('.titlebox').fadeIn(500); 
    }); 
});