更改 .hover <h2> 标题的颜色（但保持其他 <h2> 的原始颜色）

Question

我正在寻求有关颜色的基本变化的帮助，由使用 jQuery 的悬停事件触发。

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

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

1. 悬停在整个 div 上 (div class="post">)
2. div 背景颜色从 #FFF 变为 #333
3. 将文本从 #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>

Answer 1

请使用以下代码

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)，请检查