Проблема с настройкой прозрачного наведения на CSS-запрос @media

Question

У меня есть боковая панель, и при прокрутке на боковой панели с помощью мобильного я бы хотел, чтобы была возможна только прокрутка, а не зависание. Я использовал этот подход (решение только для CSS!), Основанное на ответах, которые я видел ранее:

  /* default hover class on list items*/
  ul li:hover .check {
  border: 4px solid #FFFFFF;
}

/* default hover class on list items when checked*/
ul li:hover .check {
border: 4px solid #FFFFFF;
}


/* for mobile, set hover-color on list items to be same as un-hovered list items --THIS IS WORKING*/
@media all and (min-width:320px) and (max-width: 960px) {
    ul li:hover label {
    color: #AAAAAA;
    background: transparent;
  }
}

/* for mobile, set hover-color on checkmark items to be same as un-hovered checkmark items -- THIS IS NOT WORKING, this color is not applied to the checkbox*/
@media all and (min-width:320px) and (max-width: 960px) {
    ul li:hover .check{
    color: #AAAAAA;
    background: transparent;
  }
}

/* catch-all - set hover color on all list items to be same as un-hovered*/
@media all and (min-width:320px) and (max-width: 960px) {
    ul li:hover {
    color: #AAAAAA;
    background: transparent;
  }
}

Проблема в том, что запрос @media не распознает ul li:hover .check. Запрос @media для ul li:hover label работает отлично. Я не уверен, почему это так, и любые отзывы о том, как сделать эту работу, будут высоко оценены! Спасибо.

Answer 1

Поместите все ваши стили наведения в этот медиа-запрос -

@media screen and (hover: hover) {
  //styles go here
}

Это разрешит стили наведения, только если устройство поддерживает наведение. Mobile, очевидно, не поддерживает зависание.

https://developer.mozilla.org/en-US/docs/Web/CSS/@media/hover

Это намного чище, чем пытаться переопределить стили.

Answer 2

Вероятно, хорошей отправной точкой было бы взглянуть на @media(hover:hover) and (pointer: coarse){ //your media query css properties }

. Основной механизм ввода может удобно наводить курсор на элементы.

https://developer.mozilla.org/en-US/docs/Web/CSS/@media/hover

Answer 3

Некоторые заметки на вашем CSS.

1. Вы поняли, что делаете одно и то же заявление дважды здесь:

/* default hover class on list items*/
ul li:hover .check {
  border: 4px solid #FFFFFF;
}

/* default hover class on list items when checked*/
ul li:hover .check {
border: 4px solid #FFFFFF;
}

Вы можете объединить все медиа-запросы в один, то есть поместить все классы в один медиа-запрос следующим образом:

@media all and (min-width:320px) and (max-width: 960px) {

ul li:hover label {
    color: #AAAAAA;
    background: transparent;
  }

ul li:hover .check{
    color: #AAAAAA;
    background: transparent;
  }

ul li:hover {
    color: #AAAAAA;
    background: transparent;
  }

}

Хотите изменить цвет шрифта для флажка? Ваш комментарий звучит так:

  /* for mobile, set hover-color on checkmark items to be same as un-hovered checkmark items -- THIS IS NOT WORKING, this color is not applied to the checkbox*/

И, в конце концов, ответ на ваш вопрос, при условии, что у вас есть следующий HTML-код:

<div id="wrap_all">
        <ul>
            <li>
                <input type='checkbox' />
                <label>item 1</label>
            </li>
            <li>
                <input type='checkbox' />
                <label>item 2</label>
            </li>
            <li>
                <input type='checkbox' />
                <label class="check">item 3</label>
            </li>
            <li>
                <input type='checkbox' />
                <label>item 4</label>
            </li>
        </ul>
    </div>

Я считаю, что вы можете достичь того, что вы хотите, с помощью этого:

#wrap_all {
  display: flex;
  width: 100%;
  height: 60vh;
  justify-content: center;
  align-items: center;
  background: #191919;
}

ul {
  list-style:none;
  display:flex;
  flex-direction:column;
}

ul li {
  color: #ff5f00;
  margin-bottom: 5px;
  border-bottom: 4px solid transparent;
  padding:4px;
  -webkit-transition: all .25s ease-in-out;
  -moz-transition: all .25s ease-in-out;
  -ms-transition: all .25s ease-in-out;
  -o-transition: all .25s ease-in-out;
  transition: all .25s ease-in-out;
}

/* default hover class on list items*/
ul li:hover label {
  border-bottom: 1px solid #f5f5f5;
  color:#f5f5f5;
}

/* default hover class on list items when checked*/
ul li:hover .check {
  border-bottom: 4px solid #ff5f00;
}


@media all and (min-width: 320px) and (max-width: 960px) {

  ul li:hover label {
    color: #ff5f00;
    background: transparent;
    border-bottom: none;
  }


  ul li:hover .check {
    color: #AAAAAA;
    background: transparent;
  }


  ul li:hover {
    color: #ff5f00;
    background: transparent;
  }

}

Надеюсь, это поможет, используйте код здесь: https://codepen.io/webnique/pen/vYYJrbV

Answer 4

Вы пытались использовать наведение галочки вместо li?

@media all and (min-width:320px) and (max-width: 960px) {
    ul li .check:hover {
    color: #AAAAAA;
    background: transparent;
  }
}