Блог

У меня здесь есть этот цикл, который показывает данные публикации из блога WordPress —

 <?php foreach ( $product_posts as $post ) : setup_postdata( $post ); ?>
<div class="card-container">
    <div class="card-image">
        <figure>
            <a href="<?php the_permalink();?>"><?php the_post_thumbnail(); ?></a>
        </figure>
    </div>
    <div class="gallery-card-text">
        <h2><a href="<?php the_permalink();?>"><?php the_title(); ?></a></h2>
        <p><?php the_excerpt() ?></p>
    </div>
</div>
<?php endforeach; wp_reset_postdata(); ?>
  

Использование этой функции jQuery —

 $(".card-container").mouseenter(function () {
  $(".gallery-card-text").show();
  $(".card-image").hide();
});

  

Он нацелен на все в цикле, поэтому, если вы наведете курсор на 1 сообщение, оно скроет изображение на всех из них. Я хочу показывать / скрывать каждый div в цикле по отдельности при вводе мыши.

Как я могу это сделать?

Выберите элементы в элементе, который вы навели.

 $(".card-container").mouseenter(function () {
  var card = $(this);
  card.find(".gallery-card-text").show();
  car.find(".card-image").hide();
});
  

но зачем вообще использовать JavaScript, когда это может сделать простой CSS?

 .card-container .gallery-card-text { display: none;} 
.card-container:hover .gallery-card-text { display: block;} 
.card-container .card-image { display: block;}
.card-container:hover .card-image { display: none;}
  

Вам нужно указать, что .gallery-card-text вы хотите показать, а что .card-image скрыть.

При использовании событий jQuery this привязывается к элементу, на который вы устанавливаете триггер, вы можете использовать этот элемент в качестве «области видимости», чтобы определить, какие элементы вы хотите скрыть

  $(".card-container").mouseenter(function () {
    var $this = $(this); // this = current .card-container
    
    // use .find() to get the elements within $this
    $this.find(".gallery-card-text").show();
    $this.find(".card-image").hide();
  });
  

ES6

 $(".card-container")
    .mouseenter((event) => {
         // event.currentTarget = current .card-container
        let $this = $(event.currentTarget);

        // use .find() to get the elements within $this
        $this.find(".gallery-card-text").show();
        $this.find(".card-image").hide();
    });