@Norum

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

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

у меня 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
  • Вопрос задан
  • 96 просмотров
Решения вопроса 3
SagePtr
@SagePtr
Еда - это святое
А зачем вообще тут JS, можно через таблицу стилей просто применять стили для дочерних элементов наведённых блоков:
.block:hover .price {
   ......
}
.block:hover .price span {
   ......
}
.block:hover button.buy {
   ......
}
Ответ написан
scottparker
@scottparker
это $('.price') выбирает все элементы с классом price на странице, тебе нужно искать такой элемент только внутри того на который навёл, что-то типа $(this). find('.price')
Ответ написан
LenovoId
@LenovoId
я дома ..самое лучшее время - это дома
Я же давал разметку в SVG - то что бы менять при наведении статичный фон на градиент то достаточно одного css. Делается это так - смотри : https://codepen.io/topicstarter/pen/VwKGPRd

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

А вот это без вставки SVG в блок : https://codepen.io/topicstarter/pen/JjRaNjV
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы