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

Question

[AlexandraSvetik]

Есть блок товара, нужно чтобы при наведении на него мышкой срабатывало свойство 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);
}

Comments

[Антон Литвиненко]

это можно просто на css написать. скрипты нужны когда элемент который должен изменяться лежит неудобно

Answer 1

[Дима Паутов]

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

Comments

[AlexandraSvetik]

Спасибо. Не много доработала чтобы после того как убираешь курсор ссылки сбрасывались обратно

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