How can I change the image when hovering over a link?

Issue

Greetings how to implement this menu. Its trick is that when the mouse is on the link of a certain product, this product is displayed above.

My attempts to implement this functionality:

$(document).ready(function() {
  var $img = $('.card-img-top'),
    dsrc = $img.attr('src');
  $('.list-group li a').hover(function() {
    var $this = $(this).addClass('hover');
    $img.attr('src', $this.data('image'));
  }, function() {
    $(this).removeClass('hover');
    $img.attr('src', dsrc);
  });
});

.card {
  border: none;
  margin: 0px 30px 0px 0px;
}

.card-img-top {
  border-radius: 0;
  height: 230px;
  width: 370px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 50%;
}

.card-block {
  margin-top: 20px;
}

.link a {
  text-decoration: none;
  color: #212529;
  font-weight: bold;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">

<div class="py-4">
  <div class="container">
    <div class="row hidden-md-up">
      <div class="col-md-4">
        <div class="card">
          <img src="https://www.koemmerling.com/cms16/files/Fenster-Haustueren-Verteiler.jpg?h=246" class="card-img-top" id="first">
          <div class="card-block">
            <h5 class="card-title fw-bold">Оконные и дверные системы</h5><br>
            <ul class="list-group list-group-flush">
              <li class="list-group-item link"><a id="1" href="#" data-image="https://www.koemmerling.com/cms16/files/38_System-88-MD-Standard_weiss_web.jpg?h=246"><i class="fa-solid fa-angle-right"></i> 88 мм</a></li>
              <li class="list-group-item link"><a id="2" href="#" data-image="https://www.koemmerling.com/cms16/files/5_System-76-AD-Standard_weiss_web.jpg?h=246"><i class="fa-solid fa-angle-right"></i> 76 мм</a></li>
              <li class="list-group-item link"><a id="3" href="#" data-image="https://www.koemmerling.com/cms16/files/1_System-70-AD-Standard_weiss_web.jpg?h=246"><i class="fa-solid fa-angle-right"></i> 70 мм</a></li>
            </ul>
          </div>
        </div>
      </div>
      <div class="col-md-4">
        <div class="card">
          <img src="https://www.koemmerling.com/cms16/files/KOEMMERLING-PremiPlan-Verteiler-Produkte.jpg?h=246" class="card-img-top" alt="...">
          <div class="card-block">
            <h5 class="card-title fw-bold">Пороговые системы</h5><br>
            <ul class="list-group list-group-flush">
              <li class="list-group-item link"><a id="1" href="#" data-image="/38_System-88-MD-Standard_weiss_web.jpg"><i class="fa-solid fa-angle-right"></i> 88 мм</a></li>
              <li class="list-group-item link"><a id="2" href="#" data-image="/5_System-76-AD-Standard_weiss_web.jpg"><i class="fa-solid fa-angle-right"></i> 76 мм</a></li>
              <li class="list-group-item link"><a id="3" href="#" data-image="/1_System-70-AD-Standard_weiss_web.jpg"><i class="fa-solid fa-angle-right"></i> 70 мм</a></li>
            </ul>
          </div>
        </div>
      </div>
      <div class="col-md-4">
        <div class="card">
          <img src="https://www.koemmerling.com/cms16/files/Schiebesysteme-Verteiler.jpg?h=246" class="card-img-top" alt="...">
          <div class="card-block">
            <h5 class="card-title fw-bold">Раздвижные системы</h5><br>
            <ul class="list-group list-group-flush">
              <li class="list-group-item link"><a id="1" href="#" data-image="/38_System-88-MD-Standard_weiss_web.jpg"><i class="fa-solid fa-angle-right"></i> 88 мм</a></li>
              <li class="list-group-item link"><a id="2" href="#" data-image="/5_System-76-AD-Standard_weiss_web.jpg"><i class="fa-solid fa-angle-right"></i> 76 мм</a></li>
              <li class="list-group-item link"><a id="3" href="#" data-image="/1_System-70-AD-Standard_weiss_web.jpg"><i class="fa-solid fa-angle-right"></i> 70 мм</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>

I would be extremely grateful if anyone could help me figure out how to do this.

<div class="card">
          <img src="/Schiebesysteme-Verteiler.jpeg" class="card-img-top" alt="...">
          <div class="card-block">
            <h5 class="card-title fw-bold">Раздвижные системы</h5><br>
            <ul class="list-group list-group-flush">
              <li class="list-group-item link"><a id="1" href="#" data-image="/38_System-88-MD-Standard_weiss_web.jpg"><i class="fa-solid fa-angle-right"></i> 88 мм</a></li>
              <li class="list-group-item link"><a id="2" href="#" data-image="/5_System-76-AD-Standard_weiss_web.jpg"><i class="fa-solid fa-angle-right"></i> 76 мм</a></li>
              <li class="list-group-item link"><a id="3" href="#" data-image="/1_System-70-AD-Standard_weiss_web.jpg"><i class="fa-solid fa-angle-right"></i> 70 мм</a></li>
            </ul>
          </div>
        </div>

Solution

$img is all the top images. You should just change the image in the same .card group.

You can't use a global variable for the previous image, since it's different for each image. Save it in another data() variable.

$(document).ready(function() {
  $('.list-group li a').hover(function() {
  console.log("hover");
    var $this = $(this).addClass('hover');
    var $img = $this.closest(".card").find(".card-img-top");
    $img.data("orig-src", $img.attr("src"));
    $img.attr('src', $this.data('image'));
  }, function() {
  console.log("remove");
    var $this = $(this).removeClass('hover');
    var $img = $this.closest(".card").find(".card-img-top");
    $img.attr('src', $img.data("orig-src"));
  });
});

.card {
  border: none;
  margin: 0px 30px 0px 0px;
}

.card-img-top {
  border-radius: 0;
  height: 230px;
  width: 370px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 50%;
}

.card-block {
  margin-top: 20px;
}

.link a {
  text-decoration: none;
  color: #212529;
  font-weight: bold;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">

<div class="py-4">
  <div class="container">
    <div class="row hidden-md-up">
      <div class="col-md-4">
        <div class="card">
          <img src="https://www.koemmerling.com/cms16/files/Fenster-Haustueren-Verteiler.jpg?h=246" class="card-img-top" id="first">
          <div class="card-block">
            <h5 class="card-title fw-bold">Оконные и дверные системы</h5><br>
            <ul class="list-group list-group-flush">
              <li class="list-group-item link"><a id="1" href="#" data-image="https://www.koemmerling.com/cms16/files/38_System-88-MD-Standard_weiss_web.jpg?h=246"><i class="fa-solid fa-angle-right"></i> 88 мм</a></li>
              <li class="list-group-item link"><a id="2" href="#" data-image="https://www.koemmerling.com/cms16/files/5_System-76-AD-Standard_weiss_web.jpg?h=246"><i class="fa-solid fa-angle-right"></i> 76 мм</a></li>
              <li class="list-group-item link"><a id="3" href="#" data-image="https://www.koemmerling.com/cms16/files/1_System-70-AD-Standard_weiss_web.jpg?h=246"><i class="fa-solid fa-angle-right"></i> 70 мм</a></li>
            </ul>
          </div>
        </div>
      </div>
      <div class="col-md-4">
        <div class="card">
          <img src="https://www.koemmerling.com/cms16/files/KOEMMERLING-PremiPlan-Verteiler-Produkte.jpg?h=246" class="card-img-top" alt="...">
          <div class="card-block">
            <h5 class="card-title fw-bold">Пороговые системы</h5><br>
            <ul class="list-group list-group-flush">
              <li class="list-group-item link"><a id="1" href="#" data-image="/38_System-88-MD-Standard_weiss_web.jpg"><i class="fa-solid fa-angle-right"></i> 88 мм</a></li>
              <li class="list-group-item link"><a id="2" href="#" data-image="/5_System-76-AD-Standard_weiss_web.jpg"><i class="fa-solid fa-angle-right"></i> 76 мм</a></li>
              <li class="list-group-item link"><a id="3" href="#" data-image="/1_System-70-AD-Standard_weiss_web.jpg"><i class="fa-solid fa-angle-right"></i> 70 мм</a></li>
            </ul>
          </div>
        </div>
      </div>
      <div class="col-md-4">
        <div class="card">
          <img src="https://www.koemmerling.com/cms16/files/Schiebesysteme-Verteiler.jpg?h=246" class="card-img-top" alt="...">
          <div class="card-block">
            <h5 class="card-title fw-bold">Раздвижные системы</h5><br>
            <ul class="list-group list-group-flush">
              <li class="list-group-item link"><a id="1" href="#" data-image="/38_System-88-MD-Standard_weiss_web.jpg"><i class="fa-solid fa-angle-right"></i> 88 мм</a></li>
              <li class="list-group-item link"><a id="2" href="#" data-image="/5_System-76-AD-Standard_weiss_web.jpg"><i class="fa-solid fa-angle-right"></i> 76 мм</a></li>
              <li class="list-group-item link"><a id="3" href="#" data-image="/1_System-70-AD-Standard_weiss_web.jpg"><i class="fa-solid fa-angle-right"></i> 70 мм</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>

Answered By - Barmar