jQuery鼠标悬停针对Wordpress中的所有Divs博客模板

Question

我有一个Wordpress博客模板，图像浮动到右边，文本(标题，日期，类别，摘要)浮动在左边。当鼠标悬停在图像上时，我想更改文本背景颜色和文本颜色，但当我将鼠标悬停在图像上时，jQuery会指向博客页面中的所有帖子。我希望它只针对一个帖子，怎么做呢？

这是PHP

<h1 class="thumb" style="z-index:2; width:252px;">
                    <a class="odkaz" style="padding:15px 15px 5px 15px; width:252px; heighty:109px;font-size:30px; font-weight:100; " href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( 'Permalink to %s', UT_THEME_NAME ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php the_title(); ?></a>

                </h1>

               <br/>

                <div class="post-ut" style="margin-top:-43px;"> 
            &nbsp;&nbsp;&nbsp;&nbsp;<?php the_time('d. m. Y, g:i') ?> | <?php lambda_posted_in(); ?>                            
                </div> <!-- post by -->

            </header>

        <?php 

            echo '<div class="thumb" style="width:282px; padding-left:282px; margin-top:-114px; margin-bottom:20px; "><div class="post-image"><div class="overflow-hidden imagepost">';
            echo '<img class="wp-post-image"  style="display:inline-block; width:282px; height:272px;" src="'.$url.'" />';
            echo '<a title="'.get_the_title().'" href="'.get_permalink().'"><div class="hover-overlay"><span class="circle-hover"><img src="'.get_template_directory_uri().'/images/circle-hover.png" alt="'.__('link icon',UT_THEME_INITIAL).'" /></span></div></a>';
            echo '</div></div></div>';

        endif; ?>

        <div class="entry-content clearfix">

        <div class="entry-summary">

            <?php if ( is_archive() || is_search() || get_option_tree('excerpt_blog') == 'yes') : 

                the_excerpt(); 

            else : 
         ?>



           <?php endif; ?>   

        </div><!-- .entry-summary -->

        </div><!-- .entry-content -->

这是jQuery

$('.thumb').mouseover(function() {
$('.thumb a').css("color","black");
$('.thumb a').css("background","#ff7f00");
$('.post-ut').css("color","black");
$('.post-ut a').css("color","black");
$('.post-ut').css("background","#ff7f00");
$('.entry-summary p').css("color","black");
$('.entry-summary p').css("background","#ff7f00");

})；

$('.thumb').mouseout(function() {
    $('.post-ut').css("color","white");
    $('.post-ut a').css("color","white");
    $('.post-ut').css("background","black");
    $('.thumb a').css("color","white");
    $('.thumb a').css("background","black");
    $('.entry-summary p').css("color","white");
    $('.entry-summary p').css("background","black");
});

Answer 1

您可以通过使用this作为.thumb元素中元素的第二个参数来完成此操作。对于其他类型，如果它们都有一个共同的父级，则可以使用this.parent()，如下所示：

$('div.thumb').mouseover(function() {
    $('a', this)
       .css("color","black")
       .css("background","#ff7f00");
    $('.post-ut', $(this).parent())
       .css("color","black")
       .css("background","#ff7f00")
       .find('a').css("color","black");
    $('.entry-summary p', $(this).parent())
       .css("color","black")
       .css("background","#ff7f00");
}

jQuery选择器$的第二个参数将查询限制到该元素中的元素。这里的this指的是在本例中鼠标悬停(.thumb)的元素。