我有一个 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;">
<?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");
});