Почему не срабатывает hover и focus?

Question

[absurd88]

<ul>
             <li class="filter-option">
              <label>
               <input class="filter-input" type="checkbox" name="Point">
              POINT
             </label>
              </li>
</ul>

.filter-input:hover + label,
.filter-input:focus + label {
   color: #663d15;
 }

Answer 1

[Артур]

Селектор + label у вас не срабатывает. Если label поставите за input на одном уровне, то все выйдет. + - это первый правый элемент

Comments

[absurd88]

Спасибо, понял, что касается label. Но даже если убрать в CSS label и оставить

.filter-input:hover{
   color: #663d15;
 }

И на всякий случай убрал из HTML, все равно не срабатывает hover.

[Артур]

absurd88, внутри инпута нету текста, чтобы ваш код сработал

Answer 2

[L1nks]

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

Comments

[absurd88]

Спасибо, понял, что касается label. Но даже если убрать в CSS label и оставить

.filter-input:hover{
   color: #663d15;
 }

И на всякий случай убрал из HTML, все равно не срабатывает hover.

Answer 3

[WapSter]

Неверно применен селектор отношения, для + элементы должны быть на одном уровне. Учись лучше)

Comments

[absurd88]

Спасибо, понял, что касается label. Но даже если убрать в CSS label и оставить

.filter-input:hover{
   color: #663d15;
 }

И на всякий случай убрал из HTML, все равно не срабатывает hover.

[WapSter]

absurd88, код в песочницу залей.