AlexandraSvetik
@AlexandraSvetik

Как сделать чтобы код JQUERY работал только в определенном блоке (на который наведен курсор)?

Есть блок товара, нужно чтобы при наведении на него мышкой срабатывало свойство transform: scale и ссылка меняла цвет. У меня поучилось, но есть проблема в том, что когда код срабатывает, ссылки меняются во всех блоках. Что не так делаю?

Полный код блока:

<section class="main">
      <div class="container">
        <div class="row">
          <div class="products col-sm-4 col-md-4 col-lg-4">
            <div class="product-cat">
              <div class="product-img"><img src="image/IMG_5443.jpg" alt=""></div>
              <div class="product-text"><a class="product-text-link" href="#">Говяжьи ребра slow and low</a></div>
            </div>
          </div>
          
          <div class="products col-sm-4 col-md-4 col-lg-4">
            <div class="product-cat">
              <div class="product-img"><img src="image/IMG_5443.jpg" alt=""></div>
              <div class="product-text"><a class="product-text-link" href="#">Говяжьи ребра slow and low</a></div>
            </div>
          </div>
          
          <div class="products col-sm-4 col-md-4 col-lg-4">
            <div class="product-cat">
              <div class="product-img"><img src="image/IMG_5443.jpg" alt=""></div>
              <div class="product-text"><a class="product-text-link" href="#">Говяжьи ребра slow and low</a></div>
            </div>
          </div>

          <div class="products col-sm-4 col-md-4 col-lg-4">
            <div class="product-cat">
              <div class="product-img"><img src="image/IMG_5443.jpg" alt=""></div>
              <div class="product-text"><a class="product-text-link" href="#">Говяжьи ребра slow and low</a></div>
            </div>
          </div>

          <div class="products col-sm-4 col-md-4 col-lg-4">
            <div class="product-cat">
              <div class="product-img"><img src="image/IMG_5443.jpg" alt=""></div>
              <div class="product-text"><a class="product-text-link" href="#">Говяжьи ребра slow and low</a></div>
            </div>
          </div>

          <div class="products col-sm-4 col-md-4 col-lg-4">
            <div class="product-cat">
              <div class="product-img"><img src="image/IMG_5443.jpg" alt=""></div>
              <div class="product-text"><a class="product-text-link" href="#">Говяжьи ребра slow and low</a></div>
            </div>
          </div>
        </div>
      </div>  
    </section>

Код одного блока:

<div class="products col-sm-4 col-md-4 col-lg-4">
            <div class="product-cat">
              <div class="product-img"><img src="image/IMG_5443.jpg" alt=""></div>
              <div class="product-text"><a class="product-text-link" href="#">Говяжьи ребра slow and low</a></div>
            </div>
    </div>

Код JQUERY:

$( ".product-cat" ).hover(function(){ 
    $( this ).toggleClass( "cat-hover" )
    var link = $('.product-text-link'); 
    link.css('color','#f85e22'); 
  });

Код СSS:

.cat-hover{
  box-shadow: 0 0 5px rgb(0 0 0);
  transform: scale(1.1);
}
  • Вопрос задан
  • 67 просмотров
Решения вопроса 1
bootd
@bootd
Гугли и ты откроешь врата знаний!
$( ".product-cat" ).hover(function(){ 
    $( this ).toggleClass( "cat-hover" )
    var link = $( this ).find('.product-text-link'); 
    link.css('color','#f85e22'); 
  });
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы