Jquery 更改悬停的颜色<；h2>；标题（但保持其他<；h2>；的原始颜色）

我正在寻找有关使用jQuery的悬停事件触发的基本颜色更改的帮助

基本上，我的WordPress正面有一系列帖子。每个帖子都是一个div类，通常由WordPress创建

我决定通过以下方式进行视觉上的改变：

悬停在整个div上（div class=“post”>）

div背景色从#FFF更改为#333

将文本从#000更改为#fff

不幸的是，当您将鼠标悬停在div上时，事件也会无意中更改所有其他帖子的文本颜色

如何隔离事件，以便只有悬停在上面的当前div才会执行上述事件，而不会更改所有其他div

我有一个包装标签，使css转换工作

   jQuery(document).ready(function(){
  jQuery('.article_highlight').hover(function(){ 
  jQuery(this).css('border', '1px solid #cccccc');
jQuery(this).css('background-color', '#333');
jQuery('.entry-summary p').css('color', '#fff');
  },function(){
    jQuery(this).css('border', 'none');
jQuery(this).css('background-color', '#fff');
jQuery('.entry-summary p').css('color', '#242424');
  });
});

 <div class="article_highlight"><article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
    <?php if ( has_post_thumbnail() && ! post_password_required() ) : ?>
        <a class="post-thumbnail" href="<?php the_permalink(); ?>" aria-hidden="true">
            <?php the_post_thumbnail( 'post-thumbnail', array( 'alt' => get_the_title() ) ); ?>
        </a>
    <?php endif; ?>

    <?php if ( 'post' == get_post_type() ) : ?>
        <div class="entry-date">
            <?php resonar_entry_date(); ?>
        </div><!-- .entry-date -->
    <?php endif; ?>

    <?php the_title( sprintf( '<header class="entry-header"><h2 class="entry-title"><a href="%s" rel="bookmark">', esc_url( get_permalink() ) ), '</a></h2></header>' ); ?>

    <div class="entry-summary">
        <?php the_excerpt(); ?>
    </div><!-- .entry-summary -->
</article></div>

jQuery（文档）.ready（函数（）{
jQuery（'.article_highlight'）.hover（函数（）{
jQuery（this）.css（'border'，'1px solid#cccc'）；
jQuery（this）.css（'background-color'，'#333'）；
jQuery（'.entry summary p'）.css（'color'，'#fff'）；
}，函数（）{
jQuery（this）.css（'border'，'none'）；
jQuery（this.css（'background-color'，'#fff'）；
jQuery（'.entry summary p'）.css（'color'，'#2424'）；
});
});
请使用下面的代码

jQuery(document).ready(function(){
  jQuery('.article_highlight').hover(function(){ 
  jQuery(this).css('border', '1px solid #cccccc');
jQuery(this).css('background-color', '#333');
jQuery('p',this).css('color', '#fff');
  },function(){
    jQuery(this).css('border', 'none');
jQuery(this).css('background-color', '#fff');
jQuery('p',this).css('color', '#242424');
  });
});

将
jQuery（'.entry summary p'）
更改为
jQuery（'p'，this）
，请检查请使用下面的代码

jQuery(document).ready(function(){
  jQuery('.article_highlight').hover(function(){ 
  jQuery(this).css('border', '1px solid #cccccc');
jQuery(this).css('background-color', '#333');
jQuery('p',this).css('color', '#fff');
  },function(){
    jQuery(this).css('border', 'none');
jQuery(this).css('background-color', '#fff');
jQuery('p',this).css('color', '#242424');
  });
});

将
jQuery（'.entry summary p'）
更改为
jQuery（'p'，this）
，请检查
为什么不使用css？这样我就可以从一个脚本文件中控制所有jQuery，与纯css分离。为什么不使用css？这样我就可以从一个脚本文件中控制所有jQuery，与纯CSS分离。非常感谢您的帮助和快速支持！这是天衣无缝的。非常感谢您在这个宝贵的论坛上的帮助。很高兴知道它帮助了您：）请将我的答案标记为答案：）非常感谢您的帮助和快速支持！这是天衣无缝的。非常感谢您在这个宝贵的论坛上提供的帮助。很高兴知道它帮助了您：）请将我的答案标记为答案：）