Первый элемент списка игнорирует изменение свойств при наведении

Question

У меня есть список . Когда пользователь наводится на элемент списка, его блок должен съезжать немного вправо, менять фоновый цвет и цвет текста. . Проблема заключается в том, что первый элемент списка игнорирует одно изменение из трёх - не меняется цвет текста. То есть блок съезжает вправо, фоновый цвет меняется, а цвет текста нет. Прошу помочь. Вероятнее всего я где-то что-то упустил и недосмотрел, внимательности мне сегодня не хватает.

Код:

.documents__wrapper {
  width: 100%;
  height: 100%;
  margin-top: 30px;
  padding-left: 30px;
}

.documents__wrapper .documents__list li {
  color: #fff;
  font-size: 20px;
  padding: 20px;
  width: 65%;
  margin-bottom: 30px;
  background-color: #5b2e83;
}

.documents__wrapper .documents__list li i {
  padding-right: 20px;
  font-size: 22px;
}

.documents__wrapper .documents__list li:hover {
  color: #5b2e83;
  background-color: #fff;
  cursor: pointer;
  transform: translateX(50px);
  transition: all .2s;
}

<div class="main__page documents__wrapper">
  <ul class="documents__list">
    <li class="doc-pdf">
      <a href="documents/Oplata_electro.pdf" target="_blank">
        <i class="fa-solid fa-file-pdf"></i>Пошаговая инструкция по оплате за электроприборы
      </a>
    </li>
    <li class="doc-pdf">
      <a href="documents/Oplata_Talonov.pdf" target="_blank">
        <i class="fa-solid fa-file-pdf"></i>Пошаговая инструкция покупки талонов на стирку
      </a>
    </li>
    <li class="doc-jpg">
      <a href="documents/Oplata_life.jpg" target="_blank">
        <i class="fa-solid fa-file-image"></i>Пошаговая инструкция по оплате за проживание
      </a>
    </li>
  </ul>
</div>

Answer 1

Напишите :hover конкретно к классу .doc-pdf, возможно ситуация изменится. Также можно попробовать приписать !important

БЛОГ НА HUSL

Первый элемент списка игнорирует изменение свойств при наведении

Ответы (1 шт):