Как сделать что у элемента были разные свойства при нажатии?

Question

[DimaGhost]

Здравствуйте! Не знаю как правильно сформулировать мысль, но надеюсь что вы поймёте.
Нужно сделать что бы при hover на блок появлялась серая звёздочка(Добавить в избранное), если убрать курсор с блока звезда пропадает.

При нажатии на звезду она становиться жёлтой и не пропадает больше если увести курсор, если опять нажать на неё она опять становиться серая и пропадает и появляется только при hover

Интересует как сделать так, что бы если звезда активная(желтая) она не пропадала , а если не активная , то пропадала.
Надеюсь что вы меня поняли, помогите пожалуйста. Спасибо большое!

Answer 1

[Кирилл Туровников]

Всего три состояния:

.item .star{
	display:none;
	background:url(gray-star.png);
}
.item:hover .star{
	display:block;
}
.item .star.act{
	background:url(yellow-star.png);
	display:block;
}

И в js переключатель:

$('.item .star').click(function(){
	$(this).toggleClass('act');
});

Comments

[DimaGhost]

Спасибо большое!