@Xveeder

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

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

Есть код:
<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 скрипта?

Спасибо.
  • Вопрос задан
  • 70 просмотров
Решения вопроса 1
@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%)');
              }
            );
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
Rsa97
@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%)');
  }
);
Ответ написан
Ваш ответ на вопрос

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

Войти через TM ID
Похожие вопросы