Question

我在Wordpress中使用Nivo Slider，我已经完美地工作了，除了我需要div或img来使用jQuery覆盖缩略图。

我无法上传文件，因为这是我的第一篇文章，但这是图库的图片：http://i.imgur.com/p27zA1B.png

我的悬停状态在我的网站上的其他地方工作，使用缩略图上的类div和此代码

    $(document).ready(function() {
    jQuery('.bottomRowLook li a').hover(
          function(){
               jQuery(this).children('.lookbook-lower-overlay').show();
          }, //hover in
          function(){
               jQuery(this).children('.lookbook-lower-overlay').hide();
          } //hover out
     ); 
});

这对Nivo Slider不起作用，因为它会自动生成缩略图，我无法确定我的代码进入的位置。我尝试使用appendTo但我不是很擅长jQuery而且大多数只是去找我找到的教程在互联网上。

生成缩略图+主图像的循环如下所示：

<div class="slider-wrapper">
                    <div id="slider" class="nivoSlider default-theme">
                        <?php $args = array( 'post_type' => 'attachment', 'posts_per_page' => 15, 'post_status' =>'any', 'post_parent' => $post->ID ); ?>
                        <?php $attachments = get_posts( $args ); ?>
                        <?php if ( $attachments ): ?>
                            <?php foreach ( $attachments as $attachment ): ?>   
                                <div class="look-upper-overlay"></div>  
                                <?php $full = wp_get_attachment_image_src( $attachment->ID, true ); ?>
                                <?php $rel = wp_get_attachment_image_src ( $attachment->ID, 'thumbnail', true); ?>
                                <?php $title = $attachment->post_title; ?>
                                <img src="<?php echo $full[0]; ?>" data-thumb="<?php echo $rel[0]; ?>" title="<?php echo $title ?>" />';
                            <?php endforeach; ?>
                        <?php endif; ?>

                    </div>
                </div>

有什么想法吗？

Answer 1

试试这个jQuery代码块，让我知道它是否会对您的特定场景产生影响。

$(document).ready(function() {
  $('.bottomRowLook li a').on('hover', function(){
      $(this).children('.lookbook-lower-overlay').show();
    },
    function(){
      $(this).children('.lookbook-lower-overlay').hide();
    }
  ); 
});

这可能与Nivo即时创建缩略图的方式有关。它可能无法在DOM中访问。在这种情况下，.on事件应该会有所帮助。

如果没有一个有效的例子，很难确定，但希望对你有用。

尝试为Nivo Slider缩略图创建翻转/活动状态

1 个答案: