Как сменить hover для маленьких экранов с касаниями?

Question

[TheSnegok]

Добрый день! Есть слайдер с кнопками на которые при наведении и нажатии меняется цвет, а вот на устройствах с касанием нужно два раза кликать, первый раз оно работает как :hover а второй как нажатие, можно ли как-то убрать :hover для устройств меньше 768px с помощью media и поставить например :active или есть какой-то другой способ?

Comments

[Сергей Сергей]

Поступить обратным методом — сделать секцию media с условием "больше 768px" и с :hover правилами внутри.

[TheSnegok]

Сергей Сергей, о реально, спасибо

Answer 1

[alexalexes]

Вариант 1. Применять псевдоклассы hover с определенной ширины экрана.
Преимущества. Классическое применение media с width работает с более древними браузерами, начиная с IE9.
Недостатки. Делается предположение, что сенсорное устройство имеет маленький размер экрана. Но это ничего не говорит о наличии только сенсорного управления.

@media (min-width: 768px)
{
  /* селектор стилей для кнопки при наведении */
  slider__button:hover
  {
  }
}

Вариант 2. Применять псевдоклассы hover для устройств, поддерживающих hover.
Преимущества. Анализируется именно наличие функции, а не предполагаемый размер экрана.
Недостатки. Не все условно древние браузеры понимают media с условием hover. От поддержки IE придется отказаться.

/* устройство поддерживает hover*/
@media (hover: hover)
{
    /* селектор стилей для кнопки при наведении */
  slider__button:hover
  {
  }
}

/*устройство не поддерживает hover */
@media (hover: none)
{
  /* селектор стилей для кнопки при наведении - не нужен, либо должен переопределять свойства hover на нейтральное состояние */
 /* slider__button:hover
  {
  }*/
}

PS:
Есть хак для поддержки media с hover для старых браузеров, но будут проблемы, если нужно иметь валидный CSS.

@media (hover), (min-width:0\0), (min--moz-device-pixel-ratio:0)
{
     /* селектор стилей для кнопки при наведении */
  slider__button:hover
  {
  }
}