Question

您好我正在尝试使隐藏的div出现在悬停以覆盖我的图像，我有一个动态生成的列表，从wordpress中的项目帖子。显然列表类名称都是不同的..

我的选择器会是什么，以便div出现在列表项目上。

<li class="item-<?php the_ID() ?> <?php if(++$count%4==0) echo 'rightmost'?> ">
                        <div class="image">
                            <span>
                                <a href="<?php the_permalink() ?>">
                                    <?php
                                        if(has_post_thumbnail()){
                                            the_post_thumbnail('post-thumb');
                                        }
                                    ?>

                                </a>
                            </span>
                            <a href="<?php the_permalink() ?>" class="link">View Details</a>                    
                        </div>
<div class="content">
                            <h2><a href="<?php the_permalink() ?>"><?php the_title() ?></a></h2>
                            <span class="tags">
                                <?php 
                                    // Fetching the tag names with respect to the post and displaying them
                                    $args =   array('orderby' => 'name', 'order' => 'ASC', 'fields' => 'names');
                                    echo implode(wp_get_object_terms( $post->ID, 'tag', $args),', '); 
                                ?>
                            </span>
                            <p>
                                <?php 
                                    // Using custom excerpt function to fetch the excerpt
                                    folio_excerpt('folio_excerpt_length','folio_excerpt_more');
                                 ?>
                            </p>
                        </div>
                        <div class="clear"></div>
                    </li>                                   
                <?php endwhile; ?>
            </ul>   


<script>

    $(document).ready(function() {
    $('.item-<?php the_ID() ?>').hover(
            function(){ 
            $('#folio li .content').fadeIn();
        },

            function() {
            $("#folio li .content").fadeOut();
            });
});

</script>

http://allavitart.yourtrioproject.com/portfolio/ 那是我的大便工作正在进行中

Answer 1

jQuery提供了多种遍历DOM的方法，所以这可以通过多种解决方案来实现，这里有一个：

$(document).ready(function() {
    $('#folio li').hover(function(){ 
            $(this).find('.content').fadeIn();
        },function() {
            $(this).find('.content').fadeOut();
    });
});

Answer 2

通过查看您的代码，我发现有一个容器ID为folio。

我们使用它：

jQuery("#folio ul li").hover(function(){ 
    jQuery(this).children("span").fadeOut(); 
});

这是解决你的问题吗？

Answer 3

您可以将您的ID the_id存储在数据属性中，然后将一个类用于jQuery选择器，例如：

HTML：

<li class="hover" data-id="<? the_id() ?>" …

jQuery的：

$(".hover").hover(function() {
    // Do something with id, show div, etc.
});

jquery使用php作为选择器

3 个答案: