1

我在 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>

有任何想法吗？

4

1 回答 1

0

试试这个 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在这种情况下，该事件应该有所帮助。

没有工作示例很难确定，但希望对您有用。

于 2013-08-22T02:16:07.013 回答