Добавлять класс именно тому элементу на который навели?

Question

[tim_tairan]

Ребята не могу сообразить как добавлять классы именно тому элементу на который мы навели?
У меня есть такой код
$(document).ready(function() {
$('.item').hover(function(){
$('.basket').toggleClass('animated bounceInDown').css({'display': 'block'});
});
});
Он при наведение на .item добавляет .basket нужные мне классы, но у меня на странице очень много item и он все добавляет, а нужно отслеживать именно на тот который мы навели.

Answer 1

[Alexander Sydorenko]

Попробуйте вот так

$(document).ready(function() {
	$('.item').hover(function(){
		// найдите Ваш .basket только у конкретного элемента, который получил hover
		$(this).find('.basket')
			.toggleClass('animated bounceInDown')
			.css({'display': 'block'});
	});
});

Comments

[tim_tairan]

Спасибо. Век живи век учись!

Answer 2

[Евгений Петров]

Пардоньте, но вы решаете крайне простую задачу через задницу.

.item:hover .basket {
	display: block;
}

Comments

[Alexander Sydorenko]

Если посмотреть по коду, он еще переключает (включает/выключает анимацию) судя по всему из вот этой библиотечки https://daneden.github.io/animate.css/ так что, не исключено, что в общем случае оправдано добавить классы на которые уже есть подключенный стили, чем дописывать к существующим стилям корзины необходимые анимации, да и придется переписывать правила стиля каждый раз, когда захочется изменить тип анимации.. а так в js только изменить класс который будет вкл./выкл.

[Евгений Петров]

Alexander Sydorenko: Вот уж как раз анимацией проще по :hover управлять.
Впрочем, дело хозяйское, что проще — дописать селекторы к блоку правил (особенно при использовании миксинов в препроцессорах), или через скрипт классы менять.

Answer 3

[Viktor Vsk]

$(this).toggleClass('animated bounceInDown').css({'display': 'block'});

Comments

[tim_tairan]

Если так то мы будем добавлять классы к .item а не к .basket, а надо именно к нему но при наведение на item

[tim_tairan]

У каждого item есть свой basket

[Viktor Vsk]

tim_tairan: ну так почитайте немного о джиквери.
$(this).find('.basket')
И вам в соседнем ответе дали правильный способ и использованием css