Как выделять только один блок?

Question

[Михаил]

Есть 3 элемента на страницы с классом declar_page_declar_list_item

При хавере меняется цвет фона элементов. Но меняются все сразу.
Логично, что при наведении меняться должен только тот блок, на который наводишься.

JS:

$(document).ready(function(){
	$('.declar_page_declar_list_item').each(function(){
		$(this).hover(function(){
			$('.declar_item_bg').toggleClass('declar_item_bg_usual');
			$('.declar_item_bg').toggleClass('declar_item_bg_active'); 
		});
	});
});

Sass:

.declar_item_bg_usual
	background-color: $blue3 
.declar_item_bg_active
	background-color: #FFCE0A

В чем проблема?

Answer 1

[Валера Карманов]

Если элемент с классом declar_item_bg находится внутри элемента с классом declar_page_declar_list_item то добавьте .find что бы менять классы именно для того на что навел...

Answer 2

[Максим Морев]

Проблема в том, что в обработчике hover вы выбираете не элемент внутри того, на который навели, а все элементы с указанным классом на странице.

Вот так будет работать:

$(this).hover(function(){
  $(this).find('.declar_item_bg').toggleClass('declar_item_bg_usual');
  $(this).find('.declar_item_bg').toggleClass('declar_item_bg_active'); 
});

Answer 3

[Pavstyuk]

Что-то мне подсказывает, что each здесь лишнее. Думаю, так должно работать, как ожидается:

$('.declar_page_declar_list_item').hover(function(){
$(this).find('.declar_item_bg').toggleClass('declar_item_bg_usual');
$(this).find('.declar_item_bg').toggleClass('declar_item_bg_active');  
});