0

Есть три карточки и скрипт изменения изображения при наведении. Сейчас изображения меняется сразу у всех карточек, нужно чтоб менялись только у одной. Возможно вместо метода siblings нужно использовать другой?

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <script
   src="https://code.jquery.com/jquery-3.4.1.min.js"
   integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
   crossorigin="anonymous"></script>

   <style>
      .card-wrap {
         font-family: 'Arial';
         display: flex;
         justify-content: space-around;
         align-items: center;
         height: 100vh;
         max-width: 1170px;
         padding: 0 15px;
         margin: 0 auto;
      }
      .card {
         cursor: pointer;
         -webkit-box-shadow: 0px 0px 5px 0px rgba(130,130,130,1);
         -moz-box-shadow: 0px 0px 5px 0px rgba(130,130,130,1);
         box-shadow: 0px 0px 5px 0px rgba(130,130,130,1);
         padding: 10px 10px 20px 10px;
         width: 300px;
      }
      .card__image {
         position: relative;
      }
      .card__info span {
         display: block;
         padding: 20px 0;
         text-align: center;
         font-size: 18px;
      }
      .thumb-content {
         display: flex;
         align-items: center;
         justify-content: center;
         padding: 5px;
         width: 100%;
         height: 220px;
      }
      .thumb-content__image {
         display: none;
         max-width: 100%;
      }
      .thumb-content__image--active {
         display: block;
         -webkit-transition: all linear .3s;
         -o-transition: all linear .3s;
         transition: all linear .3s;
         -webkit-animation-duration: 1s;
         animation-duration: 1s;
         -webkit-animation-fill-mode: both;
         animation-fill-mode: both;
         -webkit-animation-name: fadeIn;
         animation-name: fadeIn;
      }
      .thumb-dots {
         position: absolute;
         width: 100%;
         height: 100%;
         top: 0;
         display: flex;
         z-index: 1;
      }
      .thumb-dots__item {
         width: 33.3%;
         height: 100%;
         border-bottom: 3px solid transparent;
      }
      .thumb-dots__item:hover {
         border-bottom: 3px solid blue;
      }
      .btn {
         display: block;
         max-width: 120px;
         text-align: center;
         padding: 10px 10px;
         text-decoration: none;
         text-transform: uppercase;
         color: #fff;
         background-color: #060402;
         font-size: 14px;
         margin: 0 auto;
      }
      @-webkit-keyframes fadeIn {
         0% {
            opacity: 0
         }
         to {
            opacity: 1
         }
      }
      @keyframes fadeIn {
         0% {
            opacity: 0
         }
         to {
            opacity: 1
         }
      }
   </style>
</head>
<body>
   <div class="card-wrap">
      <div class="card">
         <div class="card__image">
            <div class="thumb-dots">
               <div show-tab="thumb1" class="thumb-dots__item"></div>
               <div show-tab="thumb2" class="thumb-dots__item"></div>
               <div show-tab="thumb3" class="thumb-dots__item"></div>
            </div>
            <div class="thumb-content">
               <img src="https://www.gradvent.ru/wa-data/public/shop/products/35/01/135/images/375/375.300.jpg" alt="" class="thumb1 thumb-content__image thumb-content__image--active">
               <img src="https://www.gradvent.ru/wa-data/public/shop/products/35/01/135/images/376/376.300.jpg" alt="" class="thumb2 thumb-content__image">
               <img src="https://www.gradvent.ru/wa-data/public/shop/products/35/01/135/images/697/697.300.jpg" alt="" class="thumb3 thumb-content__image">
            </div>
         </div>
         <div class="card__info">
            <span>Декоративная решетка Г-ДР</span>
            <a href="#" class="btn">В корзину</a>
         </div>
      </div>

      <div class="card">
         <div class="card__image">
            <div class="thumb-dots">
               <div show-tab="thumb1" class="thumb-dots__item"></div>
               <div show-tab="thumb2" class="thumb-dots__item"></div>
               <div show-tab="thumb3" class="thumb-dots__item"></div>
            </div>
            <div class="thumb-content">
               <img src="https://www.gradvent.ru/wa-data/public/shop/products/35/01/135/images/375/375.300.jpg" alt="" class="thumb1 thumb-content__image thumb-content__image--active">
               <img src="https://www.gradvent.ru/wa-data/public/shop/products/35/01/135/images/376/376.300.jpg" alt="" class="thumb2 thumb-content__image">
               <img src="https://www.gradvent.ru/wa-data/public/shop/products/35/01/135/images/697/697.300.jpg" alt="" class="thumb3 thumb-content__image">
            </div>
         </div>
         <div class="card__info">
            <span>Декоративная решетка Г-ДР</span>
            <a href="#" class="btn">В корзину</a>
         </div>
      </div>

      <div class="card">
         <div class="card__image">
            <div class="thumb-dots">
               <div show-tab="thumb1" class="thumb-dots__item"></div>
               <div show-tab="thumb2" class="thumb-dots__item"></div>
               <div show-tab="thumb3" class="thumb-dots__item"></div>
            </div>
            <div class="thumb-content">
               <img src="https://www.gradvent.ru/wa-data/public/shop/products/35/01/135/images/375/375.300.jpg" alt="" class="thumb1 thumb-content__image thumb-content__image--active">
               <img src="https://www.gradvent.ru/wa-data/public/shop/products/35/01/135/images/376/376.300.jpg" alt="" class="thumb2 thumb-content__image">
               <img src="https://www.gradvent.ru/wa-data/public/shop/products/35/01/135/images/697/697.300.jpg" alt="" class="thumb3 thumb-content__image">
            </div>
         </div>
         <div class="card__info">
            <span>Декоративная решетка Г-ДР</span>
            <a href="#" class="btn">В корзину</a>
         </div>
      </div>
   </div>

<script>
   $('.thumb-dots__item').hover(function() {
    var tabName = $(this).attr('show-tab');
    $(this).addClass('thumb-dots__item--active').siblings().removeClass('thumb-dots__item--active');
    $('.thumb-content .' + tabName).addClass('thumb-content__image--active').siblings().removeClass('thumb-content__image--active');
   });
</script>
</body>
</html>

1 ответ 1

2

$('.thumb-dots__item').hover(function() {
  var tabName = $(this).attr('show-tab');
  $(this).addClass('thumb-dots__item--active').siblings().removeClass('thumb-dots__item--active');
  $(this).closest('.card').find('.thumb-content .' + tabName).addClass('thumb-content__image--active').siblings().removeClass('thumb-content__image--active');
});
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>

  <style>
    .card-wrap {
      font-family: 'Arial';
      display: flex;
      justify-content: space-around;
      align-items: center;
      height: 100vh;
      max-width: 1170px;
      padding: 0 15px;
      margin: 0 auto;
    }
    
    .card {
      cursor: pointer;
      -webkit-box-shadow: 0px 0px 5px 0px rgba(130, 130, 130, 1);
      -moz-box-shadow: 0px 0px 5px 0px rgba(130, 130, 130, 1);
      box-shadow: 0px 0px 5px 0px rgba(130, 130, 130, 1);
      padding: 10px 10px 20px 10px;
      width: 300px;
    }
    
    .card__image {
      position: relative;
    }
    
    .card__info span {
      display: block;
      padding: 20px 0;
      text-align: center;
      font-size: 18px;
    }
    
    .thumb-content {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 5px;
      width: 100%;
      height: 220px;
    }
    
    .thumb-content__image {
      display: none;
      max-width: 100%;
    }
    
    .thumb-content__image--active {
      display: block;
      -webkit-transition: all linear .3s;
      -o-transition: all linear .3s;
      transition: all linear .3s;
      -webkit-animation-duration: 1s;
      animation-duration: 1s;
      -webkit-animation-fill-mode: both;
      animation-fill-mode: both;
      -webkit-animation-name: fadeIn;
      animation-name: fadeIn;
    }
    
    .thumb-dots {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      display: flex;
      z-index: 1;
    }
    
    .thumb-dots__item {
      width: 33.3%;
      height: 100%;
      border-bottom: 3px solid transparent;
    }
    
    .thumb-dots__item:hover {
      border-bottom: 3px solid blue;
    }
    
    .btn {
      display: block;
      max-width: 120px;
      text-align: center;
      padding: 10px 10px;
      text-decoration: none;
      text-transform: uppercase;
      color: #fff;
      background-color: #060402;
      font-size: 14px;
      margin: 0 auto;
    }
    
    @-webkit-keyframes fadeIn {
      0% {
        opacity: 0
      }
      to {
        opacity: 1
      }
    }
    
    @keyframes fadeIn {
      0% {
        opacity: 0
      }
      to {
        opacity: 1
      }
    }
  </style>
</head>

<body>
  <div class="card-wrap">
    <div class="card">
      <div class="card__image">
        <div class="thumb-dots">
          <div show-tab="thumb1" class="thumb-dots__item"></div>
          <div show-tab="thumb2" class="thumb-dots__item"></div>
          <div show-tab="thumb3" class="thumb-dots__item"></div>
        </div>
        <div class="thumb-content">
          <img src="https://www.gradvent.ru/wa-data/public/shop/products/35/01/135/images/375/375.300.jpg" alt="" class="thumb1 thumb-content__image thumb-content__image--active">
          <img src="https://www.gradvent.ru/wa-data/public/shop/products/35/01/135/images/376/376.300.jpg" alt="" class="thumb2 thumb-content__image">
          <img src="https://www.gradvent.ru/wa-data/public/shop/products/35/01/135/images/697/697.300.jpg" alt="" class="thumb3 thumb-content__image">
        </div>
      </div>
      <div class="card__info">
        <span>Декоративная решетка Г-ДР</span>
        <a href="#" class="btn">В корзину</a>
      </div>
    </div>

    <div class="card">
      <div class="card__image">
        <div class="thumb-dots">
          <div show-tab="thumb1" class="thumb-dots__item"></div>
          <div show-tab="thumb2" class="thumb-dots__item"></div>
          <div show-tab="thumb3" class="thumb-dots__item"></div>
        </div>
        <div class="thumb-content">
          <img src="https://www.gradvent.ru/wa-data/public/shop/products/35/01/135/images/375/375.300.jpg" alt="" class="thumb1 thumb-content__image thumb-content__image--active">
          <img src="https://www.gradvent.ru/wa-data/public/shop/products/35/01/135/images/376/376.300.jpg" alt="" class="thumb2 thumb-content__image">
          <img src="https://www.gradvent.ru/wa-data/public/shop/products/35/01/135/images/697/697.300.jpg" alt="" class="thumb3 thumb-content__image">
        </div>
      </div>
      <div class="card__info">
        <span>Декоративная решетка Г-ДР</span>
        <a href="#" class="btn">В корзину</a>
      </div>
    </div>

    <div class="card">
      <div class="card__image">
        <div class="thumb-dots">
          <div show-tab="thumb1" class="thumb-dots__item"></div>
          <div show-tab="thumb2" class="thumb-dots__item"></div>
          <div show-tab="thumb3" class="thumb-dots__item"></div>
        </div>
        <div class="thumb-content">
          <img src="https://www.gradvent.ru/wa-data/public/shop/products/35/01/135/images/375/375.300.jpg" alt="" class="thumb1 thumb-content__image thumb-content__image--active">
          <img src="https://www.gradvent.ru/wa-data/public/shop/products/35/01/135/images/376/376.300.jpg" alt="" class="thumb2 thumb-content__image">
          <img src="https://www.gradvent.ru/wa-data/public/shop/products/35/01/135/images/697/697.300.jpg" alt="" class="thumb3 thumb-content__image">
        </div>
      </div>
      <div class="card__info">
        <span>Декоративная решетка Г-ДР</span>
        <a href="#" class="btn">В корзину</a>
      </div>
    </div>
  </div>

</body>

</html>

1
  • Красивое решение. Я что-то через parent всё думал.
    – Denis640Kb
    29 мар 2020 в 21:08

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.