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

Question

[Norum]

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

и я прописал такую hover функцию

$(".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");
   });

  
});

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

Comments

[Rustam Bainazarov]

Тут вообще IS не нужен. Ну а так, нужно искать внутри с помощью:$(this).find('.price').addClass('active');.
И все остальные элементы по аналогии.

Но опять же, тут JS вообще не нужен, всё это можно сделать на CSS через:

.block:hover .price {
   /* стили при наведении */
}

Answer 1

[SagePtr]

А зачем вообще тут JS, можно через таблицу стилей просто применять стили для дочерних элементов наведённых блоков:

.block:hover .price {
   ......
}
.block:hover .price span {
   ......
}
.block:hover button.buy {
   ......
}

Answer 2

[scottparker]

это $('.price') выбирает все элементы с классом price на странице, тебе нужно искать такой элемент только внутри того на который навёл, что-то типа $(this). find('.price')

Answer 3

[Максим]

Я же давал разметку в SVG - то что бы менять при наведении статичный фон на градиент то достаточно одного css. Делается это так - смотри : https://codepen.io/topicstarter/pen/VwKGPRd

Если я что то делаю не так напиши в комментарии

А вот это без вставки SVG в блок : https://codepen.io/topicstarter/pen/JjRaNjV