Как менять стиль при наведении на блок?

Question

[s_v_stark]

Здравствуйте, помогите пожалуйста решить вопрос.
В js можно сказать полный ноль.
Суть вопроса:
как сделать что бы при наведении на блок див, скрипт срабатывал только для данного блока? А не для всех имеющихся с данным классом.
Как можно это реализовать?
Зараннее спасибо

<div class="main-text-block-works grid">
        <div class="block-works-item">
          <img src="img/pricess1.png" alt="">
          <div class="text-block_price">
          asdasdasYYYYY
          </div>
        </div>
        <div class="block-works-item">
          <img src="img/pricess1.png" alt="">
          <div class="text-block_price">
          asdasdasYYYYY
          </div>
        </div>
        <div class="block-works-item">
          <img src="img/pricess1.png" alt="">
          <div class="text-block_price">
          asdasdasYYYYY
          </div>
        </div>
        <div class="block-works-item" id="item_4">
          <img src="img/pricess1.png" alt="">
          <div>

          </div>
        </div>
        <div class="block-works-item" id="item_5">
          <img src="img/pricess1.png" alt="">
        </div>
      </div>

.text-block_price{
  position: absolute;
  bottom:0;
  padding: 25px;
  height: 50%;
  width: 100%;
  background: white;
  z-index: 10;
  display: block;
  transition: 0.3s;
  transform: translateY(100%);
  &_hover{
    transform: translateY(0%);
  }
}

$(document).ready(function(){
  $('div').each(function(){
    $('.block-works-item').on('mouseover', function() {
      $('.text-block_price').addClass('text-block_price_hover');
    });
    $('.block-works-item').on('mouseout', function() {
      $('.text-block_price').removeClass('text-block_price_hover');
    });
  });
});

изображение 1(не наведено)

изображение 1(наведено)

Comments

[Сергей Горячев]

Простите великодушно за тупой вопрос, зачем вешать JS, так где все решается обычным CSS:hover?

[Rustam Bainazarov]

Сергей Горячев, тоже не понимаю, LOL. Может, там, конечно, есть загвоздка, почему CSS-продход невозможен, но по примеру не скажешь.

Answer 1

[zendor]

const blocks = document.querySelectorAll('.block-works-item');

blocks.forEach(block => {
  block.addEventListener('mouseenter', function() {
    this.querySelector('.text-block_price').classList.add('text-block_price_hover');
  });
  block.addEventListener('mouseleave', function() {
    this.querySelector('.text-block_price').classList.remove('text-block_price_hover');
  });
});

Comments

[s_v_stark]

Отлично, можно еще вопрос:
как сделать что бы класс удалялся когда курсор не наведен?

[zendor]

s_v_stark, Обновил ответ, но проще добавить те стили что у вас находятся в классе text-block_price_hover на :hover с помощью css.

[s_v_stark]

Все, спасибо, сам додумался)

Answer 2

[Qurel]

Можно сделать так:
https://codepen.io/Qurel/pen/wRVrKN?editors=0100

Answer 3

[Виктор]

А Вам надо чтобы при наведении на один блок, подсказка вылезала сразу на всех или на том на который навели? И Вы хотите сделать обязательно на нативном js или css тоже устроит? Если все равно, то лучше сделайте на css. Если решили на js, то советую не перебирать массив элементов через цикл и вешать на каждого обработчик события, а повесить обработчик только на родителя и через делегирование событий (через event.target) Вы сможете применить обработчик к каждому элементу. Более подробно Вы можете почитать здесь: https://learn.javascript.ru/event-delegation