Как в JQuery менять стиль только того элемента, на который происходит наведение?

Question

[Xveeder]

Здравствуйте, друзья.

Есть код:

<div class="post-item">
                  <img src="img/1.jpg" alt="">
                  <div class="post-gradient"></div>
                  <div class="post-item_inner">
                      <h2><a href="#">Заголовок статьи</a></h2>
                      <div class="post-meta">
                         <div class="post-comment">
                             <i class="fa fa-commenting"></i>
                             <span class="comments-link">
                                <a href="#">5</a>
                             </span>
                         </div>
                         <div class="post-views">
                             <i class="fa fa-eye"></i>
                             <span class="comments-link">
                                <a href="#">2398</a>
                             </span>
                         </div>  
                      </div>
                  </div>
              </div>

Нужно чтобы при наведении на .post-item менялся стиль .post-gradient

Написал такой код и вроде бы всё работает:

$('.post-item').hover(
                function(){
                    $('.post-gradient').css('background','linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.2) 70%)');
                },
                function(){
                    $('.post-gradient').css('background','linear-gradient(to top, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.2) 70%)');
                }
            );

Проблема в том, что при наведении меняются ВСЕ элементы с классом .post-gradient, а мне нужно чтобы менялся только тот, на который я навожу. Как это сделать? Не прикручивать же к каждой карточке id и писать 4 скрипта?

Спасибо.

Comments

[TheRevan]

а ничего, что проще это сделать с помощью css?

Answer 1

[Rsa97]

$('.post-item').hover(
  function() {
    $(this).children('.post-gradient').css('background','linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.2) 70%)');
  },
  function() {
    $(this).children('.post-gradient').css('background','linear-gradient(to top, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.2) 70%)');
  }
);

Comments

[Xveeder]

В вашем случае, градиент применяется к классу .post-item, и это не срабатывает. А нужно чтобы градиент применялся к .post-gradient

[Rsa97]

Xveeder, Угу, поправил

[Николай Чуприк]

Xveeder, вы бы поставили 'Ответ' Rsa97.

Answer 2

[Xveeder]

При помощи подсказки от Rsa97 нашёл решение:

$('.post-item').hover(
              function() {
                $(this).find('.post-gradient').css('background','linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.2) 70%)');
              },
              function() {
                  
                  $(this).find('.post-gradient').css('background','linear-gradient(to top, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.2) 70%)');
              }
            );