Почему не присваивается свойство 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;
}

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

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

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

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

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

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

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

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

CSS

Простой
Не понимаю, почему блок уходит влево?
- 1 подписчик
- 15 часов назад
- 69 просмотров
0

ответов
HTML

+1 ещё

Простой
Как сделать задний фон картинки с фреймом чтоб не съезжало?
- 1 подписчик
- 18 часов назад
- 45 просмотров
0

ответов
HTML

+1 ещё

Простой
Как сделать элементы в разных блоках одинаковыми по ширине?
- 1 подписчик
- 20 часов назад
- 52 просмотра
1

ответ
JavaScript

+1 ещё

Простой
Почему не указывается путь к файлу js?
- 1 подписчик
- вчера
- 74 просмотра
1

ответ
CSS

Средний
Как отключить блокировку текста?
- 1 подписчик
- вчера
- 88 просмотров
1

ответ
JavaScript

+3 ещё

Простой
MIME тип CSS при попытке добавить stylesheet в head через скрипт. Как решить проблему?
- 1 подписчик
- вчера
- 92 просмотра
2

ответа
CSS

Простой
Как задать задний фон поверх фрейма на 5 сек?
- 1 подписчик
- 12 нояб.
- 68 просмотров
1

ответ
HTML

+1 ещё

Простой
Как выбрать «опорные точки» перехода ширины экрана для стилей страниц сайта?
- 1 подписчик
- 12 нояб.
- 125 просмотров
4

ответа
CSS

+2 ещё

Простой
Словил баг с реализацией гридов в Firefox [колонки через repeat(auto-fit) и position: absolute]?
- 1 подписчик
- 12 нояб.
- 82 просмотра
0

ответов
HTML

+1 ещё

Средний
Умное количество элементов в сетке GRID?
- 1 подписчик
- 12 нояб.
- 93 просмотра
1

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

WordPress-разработчик

div. • Ставрополь

от 50 000 до 120 000 ₽

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

Rocket • Смоленск

от 80 000 до 130 000 ₽

Trainee - IT Support

move2usajobs LLC • Лос-Анджелес

от 2 000 до 4 000 $

Доработка сайта MODX. Разместить на сайте 2 кнопки

15 нояб. 2024, в 06:43

2000 руб./в час

Доработать поиск изображений на ElasticSearch

15 нояб. 2024, в 03:14

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

Заказ на 4 баннера для гемблинга

15 нояб. 2024, в 03:04

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

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?

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

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

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