Как написать изменение цвета border у элементов списка при hover?

Question

Прохожу курс по CSS, никак не удаётся реализовать hover эффект для элементов списка.

Вот так выглядит макет:

Вот так выглядят нужные стандарт, hover, focus и active эффекты:

Никак не удаётся добиться того, чтобы при наведении меняли цвет и нижний, и верхний border. Вставляю код с максимумом того, что получилось.

.questions {
  margin-top: 111px;
}

.questions__title {
  margin-bottom: 34px;
}

.questions__item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30px 0px;
  border-top: 1px solid #cacaca;
  font-size: 24px;
  line-height: 32px;
  font-weight: 700;
}

.questions__item:last-child {
  border-bottom: 1px solid #cacaca;
}

.questions__item:hover,
.questions__item:focus {
  border-color: #FF9900;
}

.questions__item:hover+.questions__item:,
.questions__item:focus {
  border-color: #FF9900;
}

.questions__item:hover .questions__question,
.questions__item:focus .questions__question {
  color: #FF9900;
}

.questions__item:hover .questions__cross-btn,
.questions__item:focus .questions__cross-btn {
  background-image: url(../images/cross-btn-orange.svg);
}

.questions__cross-btn {
  width: 50px;
  height: 50px;
  background: url(../images/cross-btn.svg) center center transparent no-repeat;
  background-size: contain;
}

<div class="questions container">
  <h2 class="questions__title title">Часто задаваемые вопросы</h2>
  <ul class="questions__list">
    <li class="questions__item">
      <div class="questions__question">Из чего формируется конечная стоимость проекта?</div>
      <div class="questions__cross-btn cross-btn"></div>
    </li>
    <li class="questions__item">
      <div class="questions__question">У меня есть свой проект. Сможем ли мы его доработать / реализовать?</div>
      <div class="questions__cross-btn cross-btn"></div>
    </li>
    <li class="questions__item">
      <div class="questions__question">Я выбираю между разными компаниями. В чём ваше отличие?</div>
      <div class="questions__cross-btn cross-btn"></div>
    </li>
    <li class="questions__item">
      <div class="questions__question">Могу ли я делегировать вам работу / согласование с подрядчиком / организацией?</div>
      <div class="questions__cross-btn cross-btn"></div>
    </li>
    <li class="questions__item">
      <div class="questions__question">Могу ли я вернуть деньги на каком-либо из этапов работ?</div>
      <div class="questions__cross-btn cross-btn"></div>
    </li>
  </ul>
</div>

Answer 1

У вас ошибка в строке - перед запятой двоеточие

.questions__item:hover+.questions__item:,
.questions__item:focus {
  border-color: #FF9900;
}

БЛОГ НА HUSL

Как написать изменение цвета border у элементов списка при hover?

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