Почему не присваивается свойство color к псевдо-классу :hover в CSS?

Question

Евгений Литвинов @noahtl

HTML
CSS

Почему не присваивается свойство color к псевдо-классу :hover в CSS?

У меня есть такой блок с двумя списками. Я их стилизировал, все работает кроме строк со значениями:

spoiler

<div class="list1">
	<div class="l1">
			<ul class="ll1">
				<li>Put on this page information about your product    </li>
				<li>A detailed description of your product</li>
				<li>Tell us about the advantages and merits</li>
				<li>Associate the page with the payment system</li>
			</ul>
			<ul class="ll2">
				<li class="rd">Put on this page information about your product</li>
				<li class="rd">A detailed description of your product</li>
				<li class="rd">Tell us about the advantages and merits</li>
				<li class="rd">Associate the page with the payment system</li>
			</ul>
		</div>
	</div>

.rd:hover{
	color: red;
}

(пробовал и по отдельности)

.ll2 li:hover{
	text-decoration-color: #f00;
}

при всём, я переписывал и перерыл интернет разными способами, но цвет текста второго списка так и не меняется

Вопрос задан более трёх лет назад
122 просмотра

1 комментарий

Подписаться 1 Простой 1 комментарий

Евгений Литвинов @noahtl Автор вопроса

забыл кинуть исходник

<!DOCTYPE html>
<html lang="ru">
<head>
	<title>Psevdoclasses</title>
	<meta name="Description" content="description">
	<meta charset="utf-8">
	<meta name="Author" content="author">
	<meta name="Keywords" content="Keywords">
	<link rel="stylesheet" href="css/styles.css">
</head>
<body>
	<div class="list1">
		<div class="l1">
			<ul class="ll1">
				<li>Put on this page information about your product    </li>
				<li>A detailed description of your product</li>
				<li>Tell us about the advantages and merits</li>
				<li>Associate the page with the payment system</li>
			</ul>
			<ul class="ll2">
				<li class="rd">Put on this page information about your product</li>
				<li class="rd">A detailed description of your product</li>
				<li class="rd">Tell us about the advantages and merits</li>
				<li class="rd">Associate the page with the payment system</li>
			</ul>
		</div>
	</div>
</body>
</html>

spoiler

*{
	padding: 0;
	margin: 0;
	border: 0;
}
*,*:before,*:after{
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
:focus,:active{outline: none;}
a:focus,a:active{outline: none;}

nav,footer,header,aside{display: block;}

html,body{
	height: 100%;
	width: 100%;
	font-size: 100%;
	line-height: 1;
	font-size: 14px;
	-ms-text-size-adjust: 100%;
	-moz-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
}
input,button,textarea{font-family:inherit;}

input::-ms-clear{display: none;}
button{cursor: pointer;}
button::-moz-focus-inner {padding:0;border:0;}
a, a:visited{text-decoration: none;}
a:hover{text-decoration: none;}
ul li{list-style: none;}
img{vertical-align: top;}

h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight: 400;}
/*--------------------*/
body{
	background: #e8e8e8
}
.list1 {
	width: 852px;
	height: 363px;
	padding: 123px 521px 1414px 290px;
}
.l1{
/* Style for "Group 1" */
	width: 629px;
	height: 163px;
}
.l2{
/* Style for "Group 1 co" */
	width: 681px;
	height: 125px;
}
.ll1{
	margin: 0 0 81px 0;
}
.ll1 li:before{
	content: url(img/check_icon.png);
	padding: 0 10px 0 0;
}
.ll1 li{
	white-space: nowrap;
}


.ll1 li:first-child{
/* Style for "Put on thi" */
width: 422px;
height: 19px;
color: #273d46;
font-family: "Arial MT";
font-size: 20px;
font-weight: 400;
font-style: normal;
letter-spacing: normal;
line-height: 36px;
text-align: left;
text-decoration: line-through;
/* Text style for "P, ut on t" */
font-style: normal;
letter-spacing: normal;
line-height: normal;
margin: 0 0 13px 0;
}
.ll1 li:nth-child(2){
	/* Style for "A detailed" */
width: 351px;
height: 20px;
color: #273d46;
font-family: "Arial MT";
font-size: 20px;
font-weight: bold;
font-style: normal;
letter-spacing: normal;
line-height: 36px;
text-align: left;
/* Text style for "A detailed" */
font-style: normal;
letter-spacing: normal;
line-height: normal;
margin: 0 0 16px 0;
}
.ll1 li:nth-child(3){
	/* Style for "Tell us ab" */
width: 354px;
height: 19px;
color: #273d46;
font-family: "Arial MT";
font-size: 20px;
font-weight: 400;
font-style: italic;
letter-spacing: normal;
line-height: 36px;
text-align: left;
/* Text style for "Tell us ab" */
font-style: italic;
letter-spacing: normal;
line-height: normal;
margin: 0 0 17px 0;
}
.ll1 li:last-child{
	/* Style for "Associate" */
width: 513px;
height: 15px;
color: #273d46;
font-family: "Arial MT";
font-size: 20px;
font-weight: 400;
font-style: normal;
letter-spacing: normal;
line-height: 36px;
text-align: left;
text-transform: uppercase;
/* Text style for "Associate" */
font-style: normal;
letter-spacing: normal;
line-height: normal;
}
.ll2{
	white-space: nowrap;
}
.ll2 li:hover:before{
	content: url(img/check_icon1.png);
}
.ll2 li:before{
	content: url(img/check_icon.png);
	padding: 0 10px 0 0;
}


.ll2 li:first-child{
/* Style for "Put on thi" */
width: 421px;
height: 19px;
color: #273d46;
font-family: "Arial MT";
font-size: 20px;
font-weight: 400;
font-style: normal;
letter-spacing: normal;
line-height: 36px;
text-align: left;
/* Text style for "P, ut on t" */
font-style: normal;
letter-spacing: normal;
line-height: normal;
margin: 0 0 13px 0;
}
.ll2 li:nth-child(2){
/* Style for "A detailed" */
width: 331px;
height: 19px;
color: #273d46;
font-family: "Arial MT";
font-size: 20px;
font-weight: 400;
font-style: normal;
letter-spacing: normal;
line-height: 36px;
text-align: left;
/* Text style for "A detailed" */
font-style: normal;
letter-spacing: normal;
line-height: normal;
margin: 0 0 17px 0;
}
.ll2 li:nth-child(3){
/* Style for "Tell us ab" */
width: 356px;
height: 19px;
color: #273d46;
font-family: "Arial MT";
font-size: 20px;
font-weight: 400;
font-style: normal;
letter-spacing: normal;
line-height: 36px;
text-align: left;
/* Text style for "Tell us ab" */
font-style: normal;
letter-spacing: normal;
line-height: normal;
margin: 0 0 17px 0;
}
.ll2 li:last-child{
/* Style for "Associate" */
width: 396px;
height: 19px;
color: #273d46;
font-family: "Arial MT";
font-size: 20px;
font-weight: 400;
font-style: normal;
letter-spacing: normal;
line-height: 36px;
text-align: left;
/* Text style for "Associate" */
font-style: normal;
letter-spacing: normal;
line-height: normal;
}
.rd:hover{
	color: red;
}
.ll2 li:hover{
	text-decoration-color: #f00;
}

Написано более трёх лет назад

Решения вопроса 1

Комментировать

Пригласить эксперта

Ваш ответ на вопрос

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

Похожие вопросы

HTML

+1 ещё

Простой
Как лучше сверстать элемент?
- 1 подписчик
- 3 часа назад
- 20 просмотров
0

ответов
JavaScript

+2 ещё

Простой
Как сделать плавное появление скрытых под display: none; карточек по клику на кнопку, при подключеной AOS?
- 1 подписчик
- 13 часов назад
- 76 просмотров
1

ответ
CSS

Простой
Как с помощью CSS при наведении курсора менять цвет рамки сразу у нескольких карточек?
- 1 подписчик
- вчера
- 71 просмотр
0

ответов
CSS

Простой
Как заменить плавно логотипы?
- 1 подписчик
- вчера
- 62 просмотра
1

ответ
HTML

Простой
Какая альтернатива AVIFS поддерживается в iOS?
- 1 подписчик
- 20 дек.
- 31 просмотр
1

ответ
CSS

Средний
Как сделать сквозную нумерацию неупорядоченных списков?
- 1 подписчик
- 20 дек.
- 69 просмотров
1

ответ
JavaScript

+2 ещё

Простой
Как исправить вёрстку, чтобы блок с изображением не уезжал из-за блока с описанием?
- 1 подписчик
- 19 дек.
- 102 просмотра
0

ответов
JavaScript

+1 ещё

Простой
Как загрузить img в первой очереди при загрузке страницы?
- 1 подписчик
- 19 дек.
- 93 просмотра
1

ответ
HTML

+1 ещё

Простой
Как с помощью регулярного выражения найти все теги?
- 1 подписчик
- 19 дек.
- 88 просмотров
2

ответа
HTML

+1 ещё

Простой
Можно ли задать стили внешнему тегу на основе вложенного?
- 1 подписчик
- 18 дек.
- 104 просмотра
1

ответ
Показать ещё Загружается…

Fullstack Developer под Wordpress

Future Search

от 90 000 до 150 000 ₽

JavaScript FullStack разработчик

Rocket • Смоленск

от 80 000 до 130 000 ₽

CRM Bitrix24 разработчик

World Vision Clinic • Москва

от 170 000 ₽

3д сцены

23 дек. 2024, в 04:30

10000 руб./за проект

Разработать телеграм бота с реферальной системой, Юкассой и ChatGPT

23 дек. 2024, в 02:13

20000 руб./за проект

Собрать из исходного кода и запустить в докере рабочее приложение с бд

22 дек. 2024, в 22:57

500 руб./за проект

Answer 1 · 2021-01-05 00:49:00

Удали с блока ответов свой ответ и отредактируй вопрос.
Примеры кода следует оформлять в песочнице, например jsfiddle.net

Насчет вопроса: ты цвет декорации задал, а само свойство text-decoration нет

.ll2 li:hover {
    text-decoration: underline;
    text-decoration-color: red;
}

Или там же свойство color: red; если цвет текста нужно изменить

Почему не присваивается свойство color к псевдо-классу :hover в CSS?

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

Минуточку внимания

Войдите на сайт