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

jquery：mouseover无法正常工作

1 个答案: