0

Как сделать так, чтобы 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/

1 ответ 1

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 { ... } ).

2
  • так а как тут обойтись без JS, если мне нужно, чтобы при наведении мыши на блок меняли свойства элементы внутри блока? Если делать просто через hover, то свойства будут работать только при наведении на один объект, на который повешены стили
    – Tempest
    11 янв 2021 в 20:30
  • @Tempest Например → jsfiddle.net/xw9kpfqb , селекторы через пробел: Захватывается все нужные элементы внутри. 11 янв 2021 в 20:37

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.