Question

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

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

我决定通过以下方式改变它：

将鼠标悬停在整个div上（div class =＆＃34; post＆＃34;＆gt;）
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>

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

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

1 个答案: