当您单击其中一张图像时，请滑动文本

Question

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

我试图通过将非活动类切换为活动类来做到这一点，但是我也不知道如何将图像链接到特定的文本区域。这是它的外观示意图。

之所以将它们放在2个不同的网格中，是因为只有第一个网格显示在较小的屏幕上。

<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/

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