Как сделать так, чтобы hover эффект работал только на наведенный объект?

Question

Как сделать так, чтобы hover функция работала на блок, на который наведена мышка? У меня почему-то активируются сразу все блоки при наведении на один из них.

у меня 4 блока

<div class="variants">
                    <div class="block">
                        <div class="title">Basic</div>
                        <div class="price"><span>12.0</span></div>
                        <div class="conditions">
                            <ul>
                                <li>One User</li>
                                <li>Multiple Access</li>
                                <li>SMS Support</li>
                                <li>24/7 Online Support</li>
                            </ul>
                        </div>
 
                        <div class="start">Start Free Trial</div>   
                        <button class="buy">Buy Now</button>
                    </div>
                    <div class="block">
                        <div class="title">Basic</div>
                        <div class="price"><span>24.0</span></div>
                        <div class="conditions">
                            <ul>
                                <li>Five User</li>
                                <li>Multiple Access</li>
                                <li>SMS Support</li>
                                <li>24/7 Online Support</li>
                            </ul>
                        </div>
 
                        <div class="start">Start Free Trial</div>   
                        <button class="buy">Buy Now</button>
                    </div>
                    <div class="block">
                        <div class="title">Basic</div>
                        <div class="price"><span>250.0</span></div>
                        <div class="conditions">
                            <ul>
                                <li>Twenty User</li>
                                <li>Multiple Access</li>
                                <li>SMS Support</li>
                                <li>24/7 Online Support</li>
                            </ul>
                        </div>
 
                        <div class="start">Start Free Trial</div>   
                        <button class="buy">Buy Now</button>
                    </div>
                    <div class="block">
                        <div class="title">Basic</div>
                        <div class="price"><span>999.0</span></div>
                        <div class="conditions">
                            <ul>
                                <li>Unlimited User</li>
                                <li>Multiple Access</li>
                                <li>SMS Support</li>
                                <li>24/7 Online Support</li>
                            </ul>
                        </div>
 
                        <div class="start">Start Free Trial</div>   
                        <button class="buy">Buy Now</button>
                    </div>
 </div>

И вот такая функция

$(".block").hover(
  function(){
    $(this).addClass('active');
    $('.price').addClass('active');
    $('.price span').addClass('active');
    $('button.buy').addClass('active');
    $('button.buy').css("color","#fff");
  }, 
 
  function(){
      $(this).removeClass('active');
      $('.price').removeClass('active');
      $('.price span').removeClass('active');
      $('button.buy').removeClass('active');
      $('button.buy').css("color","#333333");
   });
 
  
});

остальной код jsfiddle.net/7ychk30d/ Сам сайт http://tempes74.beget.tech/

Answer 1

$('.price'), $('.price span') — Они собирают список из всех подходящих элементов на странице. Нужно привязать селекторы к this:

$(".block").hover(
  function(){
    var $this = $(this);

    $this.addClass('active');
    $this.find('.price').addClass('active');
    $this.find('.price span').addClass('active');
    $this.find('button.buy').addClass('active');
    $this.find('button.buy').css("color","#fff");
  }, 
  //...

.find() находит все подходящие элементы внутри текущего .block

Но напрашивается вопрос, почему нельзя сделать всё то же самое на CSS ?

.block:hover {
  /* стили вместо $this.addClass('active') */
}

.block:hover .price { ... }
.block:hover .price span { ... }
.block:hover button.buy {
  color: #fff;
}

А если добавлять класс скриптом, первого $(this).addClass('active'); достаточно, чтобы все остальные стили привязать к нему и прописать в CSS ( .block.active .price { ... } ).

БЛОГ НА HUSL

Как сделать так, чтобы hover эффект работал только на наведенный объект?

Ответы (1 шт):