How can I affect a single div of 8 divs of a same class with jQuery?

Question

I should make it work like this

Hi everybody. On the first image you can see my task. Only the hovered div should change classes of the elements inside, but what I've done is that when you hover any of divs all of them make those changes

$('.industry__item').hover(function () {
    $('.industry__overlay').fadeToggle('active');
    $('.industry__item-text').toggleClass('active');
    $('.industry__item-text p').toggleClass('active');
});

I need a single div to change when person hovers the certain div, but I want to do it in correct way(I know I can add a special class to each div, but that's kinda wrong and not professionally). I'm not really good with pure JS but I would appreciate any help and info. At least I would know what to google. thank you

Answer 1

Well if all the elements are inside that hovered div , try to use $(this) to change the elements of that hovered div like

$('.industry__item').hover(function() {
  $(this).find('.industry__overlay').fadeToggle('active');
  $(this).find('.industry__item-text').toggleClass('active');
  $(this).find('.industry__item-text p').toggleClass('active');
});