Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > HTML и CSS
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 23.02.2022, 17:40   #1
Werver
 
Регистрация: 10.02.2022
Сообщений: 5
По умолчанию Закрашивание звезд( селекторы )

Здравствуйте, кто может помочь с задачей?
Расположить на странице пять незакрашенных звёзд. Картинкой .png (star0.png)
При поднесении мыши к любой из звёзд должна закрашиваться эта звезда и все что расположены левее неё. (star1.png)(stars.png)
Вёрстка должна быть универсальной и сработать с любым количеством звёздочек, а не только ровно с пятью.
Без использования JS.

Последний раз редактировалось Werver; 23.02.2022 в 19:16. Причина: Уточнение
Werver вне форума Ответить с цитированием
Старый 23.02.2022, 20:12   #2
Desc
Участник клуба
 
Аватар для Desc
 
Регистрация: 21.11.2007
Сообщений: 1,063
По умолчанию

HTML:
Код:
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Stars</title>
		<link href="style.css" rel="stylesheet">
	</head>
	<body>
	<div class="rating-area">
	<input type="radio" id="star-5" name="rating" value="5">
	<label for="star-5" title="Оценка «5»"></label>	
	<input type="radio" id="star-4" name="rating" value="4">
	<label for="star-4" title="Оценка «4»"></label>    
	<input type="radio" id="star-3" name="rating" value="3">
	<label for="star-3" title="Оценка «3»"></label>  
	<input type="radio" id="star-2" name="rating" value="2">
	<label for="star-2" title="Оценка «2»"></label>    
	<input type="radio" id="star-1" name="rating" value="1">
	<label for="star-1" title="Оценка «1»"></label>
	</div>
	</body>
</html>
CSS:
Код:
.rating-area {
	overflow: hidden;
	width: 265px;
	margin: 0 auto;
}
.rating-area:not(:checked) > input {
	display: none;
}
.rating-area:not(:checked) > label {
	float: right;
	width: 42px;
	padding: 0;
	cursor: pointer;
	font-size: 32px;
	line-height: 32px;
	color: lightgrey;
	text-shadow: 1px 1px #bbb;
}
.rating-area:not(:checked) > label:before {
	content: '\2605';
}
.rating-area > input:checked ~ label {
	color: gold;
	text-shadow: 1px 1px #c60;
}
.rating-area:not(:checked) > label:hover,
.rating-area:not(:checked) > label:hover ~ label {
	color: gold;
}
.rating-area > input:checked + label:hover,
.rating-area > input:checked + label:hover ~ label,
.rating-area > input:checked ~ label:hover,
.rating-area > input:checked ~ label:hover ~ label,
.rating-area > label:hover ~ input:checked ~ label {
	color: gold;
	text-shadow: 1px 1px goldenrod;
}
.rate-area > label:active {
	position: relative;
}
Link: Верстка рейтинга в виде звезд
Link: Создание 5-и звёздочной рейтинговой системы с помощью jQuery, AJAX и PHP
Link: Star Ratings With Very Little CSS
Link: Как сделать, чтобы при наведении мыши на 2-ю звездочку заработал hover первой и второй звёзд?
I am not a wizard, I am just learning.

Последний раз редактировалось Desc; 23.02.2022 в 20:18. Причина: Добавил Link
Desc вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Лесенка из звезд Blood_ghosT JavaScript, Ajax 4 30.05.2019 12:38
Дочерние селекторы sokd HTML и CSS 4 18.02.2013 07:32
Вопрос по CSS3 - селекторы md416 HTML и CSS 2 13.09.2012 12:55
css селекторы sashonk HTML и CSS 2 23.09.2010 22:58