单击其中一个图像时滑动文本

Question

我正在尝试使用jquery执行此操作，因此当您悬停或单击其中一个图像（红色框）时，灰色区域（文本区域）会更改以显示与该图像相关的文本。添加类来执行显示块不起作用，因为我不知道如何将特定图像链接到特定文本区域。

我试图通过切换活动类的非活动类来实现它，但我再次不知道如何将图像链接到特定的文本区域。这是一张草图如何。

它们在两个不同的网格中的原因是因为在较小的屏幕上只显示第一个网格。

<div class="container">
  <div class="row py-5">
    <div class="grid-reviews">
      <img class="photothumb review-1" src="img/reviews/person1.jpg">
      <img class="photothumb review-2" src="img/reviews/person2.jpg">
      <img class="photothumb review-3" src="img/reviews/person3.jpg">
      <img class="photothumb review-4" src="img/reviews/person4.jpg">
      <img class="photothumb review-5" src="img/reviews/person5.jpg">
      <img class="photothumb review-6" src="img/reviews/person6.jpg">
    </div>
    <div class="grid-reviews-2">
      <img class="photothumb review-7" src="img/reviews/person7.jpg">
      <img class="photothumb review-8" src="img/reviews/person8.jpg">
      <img class="photothumb review-9" src="img/reviews/person9.jpg">
      <img class="photothumb review-10" src="img/reviews/person10.jpg">
      <img class="photothumb review-11" src="img/reviews/person11.jpg">
      <img class="photothumb review-12" src="img/reviews/person12.jpg">
    </div>
  </div>

  <div class="testimony-desc text-center">
    <div class="review-1 not-active">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A ab deleniti, deserunt dolorum et eum iure labore libero molestiae nam nisi nostrum obcaecati perferendis rem sed tempora vel velit veniam.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, cupiditate deleniti dolore et sit veniam! Beatae explicabo iure natus veritatis? Aliquam fugiat modi molestias nisi repellendus rerum sunt tenetur veniam!</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci alias aspernatur debitis deleniti hic illo iure pariatur provident, quibusdam rem reprehenderit sit, vel. Eum nesciunt quaerat, ratione sed similique voluptas.</p>
    </div>
    <div class="review-2 not-active">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur eius eos inventore iusto laborum nostrum similique tempore veniam? Ipsa ipsum libero minima nostrum reiciendis. Ipsum iure laudantium nobis odit veritatis!</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus nihil obcaecati voluptatem. Aliquid, blanditiis dolorem et harum ipsam magnam, nemo nesciunt obcaecati pariatur quaerat quisquam similique tempore velit! Numquam, perspiciatis.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis eligendi et hic illo in necessitatibus officia pariatur porro repellat! Ab alias amet dolor doloremque inventore, placeat qui quo rerum tempore.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis eligendi et hic illo in necessitatibus officia pariatur porro repellat! Ab alias amet dolor doloremque inventore, placeat qui quo rerum tempore.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis eligendi et hic illo in necessitatibus officia pariatur porro repellat! Ab alias amet dolor doloremque inventore, placeat qui quo rerum tempore.</p>
    </div>
    <div class="review-3 not-active">
      <p></p>
      <p></p>
      <p></p>
    </div>
    <div class="review-4 not-active">
      <p></p>
      <p></p>
      <p></p>
    </div>
    <div class="review-5 not-active">
      <p></p>
      <p></p>
      <p></p>
    </div>
    <div class="review-6 not-active">
      <p></p>
      <p></p>
      <p></p>
    </div>
    <div class="review-7 not-active">
      <p></p>
      <p></p>
      <p></p>
    </div>
    <div class="review-8 not-active">
      <p></p>
      <p></p>
      <p></p>
    </div>
    <div class="review-9 not-active">
      <p></p>
      <p></p>
      <p></p>
    </div>
    <div class="review-10 not-active">
      <p></p>
      <p></p>
      <p></p>
    </div>
    <div class="review-11 not-active">
      <p></p>
      <p></p>
      <p></p>
    </div>
    <div class="review-12 not-active">
      <p></p>
      <p></p>
      <p></p>
      </di

Answer 1

 $(document).ready(function () {
    $('#wb_Image3 a img').hover(function () {
        $(this).stop().animate({
            opacity: .4
        }, 200);
        $('.text').removeClass('hide');
    }, function () {
        $(this).stop().animate({
            opacity: 1
        }, 500);
        $('.text').addClass('hide');
    });
});

http://jsfiddle.net/sushanth009/TwNGw/2/

检查小提琴链接，这是一个将图像链接到文本区域的好演示。