Задать вопрос
@DimaGhost
javascript

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

Здравствуйте! Не знаю как правильно сформулировать мысль, но надеюсь что вы поймёте.
Нужно сделать что бы при hover на блок появлялась серая звёздочка(Добавить в избранное), если убрать курсор с блока звезда пропадает.
075cf3d94d434bbd8fe9c149592903d1.png
При нажатии на звезду она становиться жёлтой и не пропадает больше если увести курсор, если опять нажать на неё она опять становиться серая и пропадает и появляется только при hover
9b1f592b181145af8866e0dd40f2e7d6.png
Интересует как сделать так, что бы если звезда активная(желтая) она не пропадала , а если не активная , то пропадала.
Надеюсь что вы меня поняли, помогите пожалуйста. Спасибо большое!
  • Вопрос задан
  • 205 просмотров
Комментировать
Подписаться 4 Оценить Комментировать
Решения вопроса 1
turovnikoff
@turovnikoff
Всего три состояния:
.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');
});
Ответ написан
1 комментарий
1 комментарий
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript разработчик
summer • Ярославль
от 100 000 до 140 000 ₽
Junior JavaScript Developer
КРАФТТЕК • Санкт-Петербург
от 60 000 до 80 000 ₽
JavaScript разработчик
вАйТи
от 5 000 до 25 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Дописать функцию на Flutter, работа с yandex map kit
20 апр. 2024, в 04:18
3000 руб./за проект
Английская версия для сайта на WordPress
20 апр. 2024, в 03:34
8000 руб./за проект
Доработать клиентское приложение для GTA 5 на C#
20 апр. 2024, в 00:51
1000 руб./за проект
Ещё заказы