Заменить CSS: навести на: активно с JS на сенсорных устройствах

Question

Я хочу удалить эффекты наведения на сенсорных устройствах. Я знаю, что лучше использовать класс hover для эффекта hover, а не псевдокласс hover, так как его легче удалить позже, но так как я уже закодировал свой сайт, я не могу изменить все это сейчас, но я нашел хорошее решение, которое нацелено all: hover псевдоклассы в CSS и заменяет их на: active. : псевдокласс active работает хорошо для того, что я хочу выполнить sh, однако у меня есть некоторые трудности с кодом JS. Возможно, есть ошибки, но я не могу их найти.

function touch() {
  if ('ontouchstart' in document.documentElement) {
    var sheet = document.getElementById("#pagestyle");
    if (sheet.cssRules) {
      for (var i = 0; i < sheet.cssRules.length; i++) {
        var rule = sheet.cssRules[i];
        if (rule.selectorText) {
          rule.selectorText = rule.selectorText.replace(':hover', ':active');
        }
      }
    }
  }
}

.test:hover {}

<link id="pagestyle" rel="stylesheet" href="css/style.css">

Answer 1

Вместо написания набора кода в JS, почему бы вам просто не добавить правило в таблицу стилей?

.test:hover,
.test:active {
}

---

Я не мог понять, почему вы не добавляете :active Правило, как указано выше, но если вы действительно хотите поставить css для этих :hover и устройств без наведения, то вы можете использовать медиа-запрос, например:

@media (hover: hover) {
  .test:hover { }
}
@media (hover: none) {
  .test:active { }
}

Там также:

/* the device does not include any pointing device. */
@media (any-pointer: none) {
    /* ... */
}

Вы можете узнать больше об этом на medium

Надеюсь, вы найдете это полезным. Но, на мой взгляд, этот шаг действительно не нужен. Как показано в первом примере кода, это будет намного лучше, чем что-либо подобное.