Изменить цвет одиночного ли при наведении

Я изо всех сил пытаюсь изменить цвет шрифта этого конкретного ли при наведении курсора. Мой код не работает должным образом, когда мышь указывает на li от белого до черного цвета.

.tags-list li{display:inline-block;background-color:#253b5d;    padding: 1px 10px !important;
    text-transform: lowercase;
    font-weight: normal;
    font-size: 14px;   
    transition: all 1s linear;
    }
.tags-list li:hover{background-color: #aebdd5;}
.tags-list li a{transition: all 1s linear;color:white;}
.tags-list ul li a:hover{color:black;}

<ul class = "tags-list">
<li><a href = "#">Testing</a></li>
<li><a href = "#">Testing</a></li>
<li><a href = "#">Testing</a></li>
<li><a href = "#">Testing</a></li>
<li><a href = "#">Testing</a></li>
<li><a href = "#">Testing</a></li>
</ul>

Вроде работает...

— 29.05.2019 08:54

@ Джек Башфорд Нет, это не работает. Цвет шрифта остается белым при наведении указателя мыши. Я хочу изменить цвет шрифта на черный.

— 29.05.2019 08:56

html css

29.05.2019 08:51

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

218

Перейти к ответу Данный вопрос помечен как решенный

Ответы 4

Удалите ul., .tags-list, уже упомянутые в ul. Он не содержит другого ul.

.tags-list li{display:inline-block;background-color:#253b5d;    padding: 1px 10px !important;
    text-transform: lowercase;
    font-weight: normal;
    font-size: 14px;   
    transition: all 1s linear;
    }
.tags-list li:hover{background-color: #aebdd5;}
.tags-list li a{transition: all 1s linear;color:white;}
.tags-list li a:hover{color:black;}

<ul class = "tags-list">
<li><a href = "#">Testing</a></li>
<li><a href = "#">Testing</a></li>
<li><a href = "#">Testing</a></li>
<li><a href = "#">Testing</a></li>
<li><a href = "#">Testing</a></li>
<li><a href = "#">Testing</a></li>
</ul>

29.05.2019 08:54

Ответ принят как подходящий

Похоже, вы добавили элемент ul после селектора класса, который уже является элементом ul.

Сравните эти две строки, которые вы написали:

.tags-list li a{transition: all 1s linear;color:white;}
.tags-list ul li a:hover{color:black;} <-- .tags-list and ul is the same element and not nested

Первый правильно обращается к элементу, а второй (который вызывает проблему) не соответствует ни одному элементу, потому что ему нужен вложенный элемент ul.

29.05.2019 08:54

Замените .tags-list ul li a:hover на .tags-list li:hover a. Повторяющийся ul в селекторе не соответствовал ссылкам.

Кроме того, я бы рекомендовал поставить :hover на li, а не на a, поэтому цвет текста также изменится, если вы наведете указатель мыши на отступ, окружающий a.

.tags-list li {
  display: inline-block;
  background-color: #253b5d;
  padding: 1px 10px !important;
  text-transform: lowercase;
  font-weight: normal;
  font-size: 14px;
  transition: all 1s linear;
}

.tags-list li:hover {
  background-color: #aebdd5;
}

.tags-list li a {
  transition: all 1s linear;
  color: white;
}

.tags-list li:hover a {
  color: black;
}

<ul class = "tags-list">
  <li><a href = "#">Testing</a></li>
  <li><a href = "#">Testing</a></li>
  <li><a href = "#">Testing</a></li>
  <li><a href = "#">Testing</a></li>
  <li><a href = "#">Testing</a></li>
  <li><a href = "#">Testing</a></li>
</ul>

29.05.2019 08:58

.tags-list ul li a:hover{color:black;} // эту строку заменить на .tags-list li: наведите курсор на {цвет: черный;}

Можете ли вы дать какое-то объяснение, пожалуйста?

— 29.05.2019 09:30

1. .tags-list и ul не вложены друг в друга. поэтому я удалил ул. Также мы можем использовать ul.tags-list 2. При наведении li изменит цвет привязки, поэтому я изменил это «li: hover a {color: black;}»

— 29.05.2019 09:46

29.05.2019 09:07