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

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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X R7YkIZDRvuzKMRqM OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">

<div >
  <div >
    <div >
      <div >
        <div >
          <img src="https://www.koemmerling.com/cms16/files/Fenster-Haustueren-Verteiler.jpg?h=246"  id="first">
          <div >
            <h5 >Оконные и дверные системы</h5><br>
            <ul >
              <li ><a id="1" href="#" data-image="https://www.koemmerling.com/cms16/files/38_System-88-MD-Standard_weiss_web.jpg?h=246"><i ></i> 88 мм</a></li>
              <li ><a id="2" href="#" data-image="https://www.koemmerling.com/cms16/files/5_System-76-AD-Standard_weiss_web.jpg?h=246"><i ></i> 76 мм</a></li>
              <li ><a id="3" href="#" data-image="https://www.koemmerling.com/cms16/files/1_System-70-AD-Standard_weiss_web.jpg?h=246"><i ></i> 70 мм</a></li>
            </ul>
          </div>
        </div>
      </div>
      <div >
        <div >
          <img src="https://www.koemmerling.com/cms16/files/KOEMMERLING-PremiPlan-Verteiler-Produkte.jpg?h=246"  alt="...">
          <div >
            <h5 >Пороговые системы</h5><br>
            <ul >
              <li ><a id="1" href="#" data-image="/38_System-88-MD-Standard_weiss_web.jpg"><i ></i> 88 мм</a></li>
              <li ><a id="2" href="#" data-image="/5_System-76-AD-Standard_weiss_web.jpg"><i ></i> 76 мм</a></li>
              <li ><a id="3" href="#" data-image="/1_System-70-AD-Standard_weiss_web.jpg"><i ></i> 70 мм</a></li>
            </ul>
          </div>
        </div>
      </div>
      <div >
        <div >
          <img src="https://www.koemmerling.com/cms16/files/Schiebesysteme-Verteiler.jpg?h=246"  alt="...">
          <div >
            <h5 >Раздвижные системы</h5><br>
            <ul >
              <li ><a id="1" href="#" data-image="/38_System-88-MD-Standard_weiss_web.jpg"><i ></i> 88 мм</a></li>
              <li ><a id="2" href="#" data-image="/5_System-76-AD-Standard_weiss_web.jpg"><i ></i> 76 мм</a></li>
              <li ><a id="3" href="#" data-image="/1_System-70-AD-Standard_weiss_web.jpg"><i ></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 >
          <img src="/Schiebesysteme-Verteiler.jpeg"  alt="...">
          <div >
            <h5 >Раздвижные системы</h5><br>
            <ul >
              <li ><a id="1" href="#" data-image="/38_System-88-MD-Standard_weiss_web.jpg"><i ></i> 88 мм</a></li>
              <li ><a id="2" href="#" data-image="/5_System-76-AD-Standard_weiss_web.jpg"><i ></i> 76 мм</a></li>
              <li ><a id="3" href="#" data-image="/1_System-70-AD-Standard_weiss_web.jpg"><i ></i> 70 мм</a></li>
            </ul>
          </div>
        </div>

CodePudding user response：

this refer to the target element (the link). You want to get from there to the correct image, so you need to go up to the closest common parent, then find the image.

$(document).ready(function() {

  $('.list-group li a').hover(function() {
    var $this = $(this).addClass('hover');
    var $img = $(this).closest(".card").find('.card-img-top');
    $img.attr('src', $this.data('image'));
  }, function() {
    // to revert use same logic, only save the value as attribute `data-old-src` or something
  });
});

CodePudding user response：

$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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X R7YkIZDRvuzKMRqM OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">

<div >
  <div >
    <div >
      <div >
        <div >
          <img src="https://www.koemmerling.com/cms16/files/Fenster-Haustueren-Verteiler.jpg?h=246"  id="first">
          <div >
            <h5 >Оконные и дверные системы</h5><br>
            <ul >
              <li ><a id="1" href="#" data-image="https://www.koemmerling.com/cms16/files/38_System-88-MD-Standard_weiss_web.jpg?h=246"><i ></i> 88 мм</a></li>
              <li ><a id="2" href="#" data-image="https://www.koemmerling.com/cms16/files/5_System-76-AD-Standard_weiss_web.jpg?h=246"><i ></i> 76 мм</a></li>
              <li ><a id="3" href="#" data-image="https://www.koemmerling.com/cms16/files/1_System-70-AD-Standard_weiss_web.jpg?h=246"><i ></i> 70 мм</a></li>
            </ul>
          </div>
        </div>
      </div>
      <div >
        <div >
          <img src="https://www.koemmerling.com/cms16/files/KOEMMERLING-PremiPlan-Verteiler-Produkte.jpg?h=246"  alt="...">
          <div >
            <h5 >Пороговые системы</h5><br>
            <ul >
              <li ><a id="1" href="#" data-image="/38_System-88-MD-Standard_weiss_web.jpg"><i ></i> 88 мм</a></li>
              <li ><a id="2" href="#" data-image="/5_System-76-AD-Standard_weiss_web.jpg"><i ></i> 76 мм</a></li>
              <li ><a id="3" href="#" data-image="/1_System-70-AD-Standard_weiss_web.jpg"><i ></i> 70 мм</a></li>
            </ul>
          </div>
        </div>
      </div>
      <div >
        <div >
          <img src="https://www.koemmerling.com/cms16/files/Schiebesysteme-Verteiler.jpg?h=246"  alt="...">
          <div >
            <h5 >Раздвижные системы</h5><br>
            <ul >
              <li ><a id="1" href="#" data-image="/38_System-88-MD-Standard_weiss_web.jpg"><i ></i> 88 мм</a></li>
              <li ><a id="2" href="#" data-image="/5_System-76-AD-Standard_weiss_web.jpg"><i ></i> 76 мм</a></li>
              <li ><a id="3" href="#" data-image="/1_System-70-AD-Standard_weiss_web.jpg"><i ></i> 70 мм</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>