Зависает :hover при нажатии на моб. устройствах

Антон
Антон
1,6K
12
Содержание:
  1. Комментарии
Всем привет! Подскажите как можно исправить эффект закисания :hover на устройствах с тач скрином? На десктопах все работает идеально, т.е навожу мышку появляется нужный цвет у кнопки убираю мышку цвет становиться по умолчанию, но на мобилках если нажать кнопку идет зависание цвета hover. (Как это вообще реализовывают? Или ни кто с этим не парится и все отключают этот эффект на мобильных через @media?)
.to-up {
  position: fixed; /* фиксированная позиция */
  color: #fff; /* цвет текста */
  background-color: #3aa111; /* цвет заднего фона */
  right:  5px; /* расстояние от правого края */
  bottom: 80px; /* расстояние от нижнего края */
  padding: 13px 13px; /* отступы до содержимого блока */
  border-radius: 100%; 
  cursor: pointer; /* форма курсора */
  display: none; /* не отображать элемент */
  text-align: center; /*выравнивание содержимого элемента по центру */
}
div.to-up:hover {
  background-color: orange; /* цвет заднего фона при наведении */
}
Спасибо!)

Комментарии: 12

  1. Антон
    Антон
    2021-04-22 05:31:56
    Александр, спасибо за пояснение, дошло! Прошу прощения если достал! ;)
  1. Александр Мальцев
    Александр Мальцев
    2021-04-22 06:18:13
    Антон, всё хорошо. Рад что помог.
  • Антон
    Антон
    2021-04-20 15:36:03
    Александр, Спасибо! Тогда оставлю как есть и ни чего не буду менять. Один момент только можно уточнить? Почему вы добавили псевдокласс .to-up:focus? Ну или посоветовали добавить. Ни как не могу понять где он отображается и будет ли вообще от него какой либо эффект? (Ведь тут, эта кнопка как такового фокуса не получает и в основном отображается только hover просматривал эффект на ПК и на моб версии). Либо это с учетом скрипта который ниже, не совсем понял этот момент. Еще раз Спасибо!)
    1. Александр Мальцев
      Александр Мальцев
      2021-04-22 03:17:51
      Пожалуйста! На автомате добавил, в данном случае focus не нужен.
    2. Антон
      Антон
      2021-04-22 03:41:55
      Понятно! Спасибо еще раз!)
  • Александр Мальцев
    Александр Мальцев
    2021-04-20 02:23:27
    Привет!

    1. Можно вообще ничего не убирать и не прописывать медиа-запросы. Как по мне так лучший вариант. Оставить так (не вижу здесь ничего такого, элемент просто таким образом будет реагировать на моё касание):
    .to-up:hover {
      background-color: orange; /* цвет заднего фона при наведении */
    }
    
    2. media запросы. Но как? Есть же ноутбуки и мониторы с сенсорным экраном. По ширине устройства тут никак не определишь. Там управление осуществляется как с помощью касания, так и мыши.

    3. Можно написать JavaScript код:
    document.addEventListener('DOMContentLoaded', function() {
      function hasTouchDevice() {
        return !!('ontouchstart' in window || navigator.maxTouchPoints);
      }
      if (!hasTouchDevice()) {
        const toUp = document.querySelector('.to-up');
        toUp.onmouseenter = function(){
          this.classList.add('hover');
        }
        toUp.onmouseleave = function() {
          this.classList.remove('hover');
        }
      }
    });
    
    Тогда в CSS сделать так:
    .to-up.hover {
      background-color: orange; /* цвет заднего фона при наведении */
    }
    
    1. Антон
      Антон
      2021-04-20 17:24:36
      Заметил еще 1 момент, что в google при просмотре на моб. устройствах появляется своя кнопка наверх, если ее нет, то вообще ни какой кнопки не будет и человеку придется скролить самому. А в яндексе например появляется ихняя кнопка наверх которая ставиться по верх моей кнопки… Да и вообще это не эстетично как то 2 кнопки выполняющие одну и ту же функцию. При просмотре на ПК эта кнопка не вылазит. В связи с этим вопрос можно ли отключить эту кнопку Яндекса?
    2. Александр Мальцев
      Александр Мальцев
      2021-04-22 03:11:33
      В мобильной версии Яндекс браузера наличие стрелки вверх определяется включенной в настройке опцией «Стрелка возврата в начало страницы». Как получить значение этой опции в JavaScript не знаю, такой информации не встречал.
      Если вы хотите отключить отображения кнопки «Вверх» в мобильной версии Яндекс браузера, то это можно сделать так:
      const userAgent = window.navigator.userAgent;
      if (!(/YaBrowser/.test(userAgent) && /Mobile/.test(userAgent))) {
        // это не мобильный Яндекс браузер
        document.addEventListener('DOMContentLoaded', function() {
          // ...
        });
      }
      
      Но если опция «Стрелка возврата в начало страницы» выключена то в этом случае не будет отображаться как родная кнопка, так и кнопка «Вверх» от Яндекс браузера.
    3. Антон
      Антон
      2021-04-22 03:43:15
      Правильно ли я вас понял, что применив этот код и моя стрелка в мобильной версии Яндекса работать не будет?)
    4. Александр Мальцев
      Александр Мальцев
      2021-04-22 03:57:01
      Нужно поместить в эту конструкцию весь код:
      const userAgent = window.navigator.userAgent;
      if (!(/YaBrowser/.test(userAgent) && /Mobile/.test(userAgent))) {
        // это не мобильный Яндекс браузер
        document.addEventListener("DOMContentLoaded", () => {
          let toTopBtn = document.querySelector(".to-up");
          let pageYOffset = 0;
          let timeout;
          window.onscroll = function () {
            if (timeout) {
              window.clearTimeout(timeout);
            }
            if (window.pageYOffset > 580) {
              toTopBtn.style.display = "block";
            } else {
              toTopBtn.style.display = "none";
            }
            pageYOffset = window.pageYOffset;
            timeout = window.setTimeout(function () {
              if (window.pageYOffset === pageYOffset) {
                toTopBtn.style.display = "none";
              }
            }, 3000);
          };
          // плавный скролл наверх
          toTopBtn.addEventListener("click", function () {
            window.scrollTo({
              top: 0,
              behavior: "smooth"
            });
          });
          function hasTouchDevice() {
            return !!('ontouchstart' in window || navigator.maxTouchPoints);
          }
          if (!hasTouchDevice()) {
            const toUp = document.querySelector('.to-up');
            toUp.onmouseenter = function () {
              this.classList.add('hover');
            }
            toUp.onmouseleave = function () {
              this.classList.remove('hover');
            }
          }
        });
      }
      
    5. Антон
      Антон
      2021-04-22 04:18:23
      Александр, Супер! Но, правда не до понял этот момент…
      --->Но если опция «Стрелка возврата в начало страницы» выключена то в этом случае не будет отображаться как родная кнопка, так и кнопка «Вверх» от Яндекс браузера. < —

      Правильно ли я понимаю:
      Как я понял у Яндекс пользователя должна быть включена опция «Стрелка возврата в начало страницы», только тогда применив этот java код который вы мне подсказали эта стрелка у пользователя исчезнет и останется мой вариант. Но, если у пользователя эта опция отключена, то не будет вообще ни каких стрелок вверх ни Яндекса ни моей?

      P.S По факту, мне кажется она у большинства стоит по умолчанию, т.е включена. Например я не знаю, где эта опция включается и выключается, думаю большинство тоже этого не знает…
    6. Александр Мальцев
      Александр Мальцев
      2021-04-22 05:16:21
      Ваш вариант кнопки вверх на мобильном Яндекс браузере в этом случае показываться не будет. Независимо от того включена эта опция в браузере или нет.

      Информации о том, как получить программно (в JavaScript) значение этой опции не встречал.

      Самая опция находится в настройках и доступна для отключения. По факту, скорее всего правы, большинство пользователей редко что-то меняет.
      Стрелка возврата в начало страницы в Яндекс браузере