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

Антон
277
12
0
Всем привет! Подскажите как можно исправить эффект закисания :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; /* цвет заднего фона при наведении */
}
Спасибо!)

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

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

        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. Антон
          20 апреля 2021, 17:24
          Заметил еще 1 момент, что в google при просмотре на моб. устройствах появляется своя кнопка наверх, если ее нет, то вообще ни какой кнопки не будет и человеку придется скролить самому. А в яндексе например появляется ихняя кнопка наверх которая ставиться по верх моей кнопки… Да и вообще это не эстетично как то 2 кнопки выполняющие одну и ту же функцию. При просмотре на ПК эта кнопка не вылазит. В связи с этим вопрос можно ли отключить эту кнопку Яндекса?
          1. Александр Мальцев
            22 апреля 2021, 03:11
            В мобильной версии Яндекс браузера наличие стрелки вверх определяется включенной в настройке опцией «Стрелка возврата в начало страницы». Как получить значение этой опции в JavaScript не знаю, такой информации не встречал.
            Если вы хотите отключить отображения кнопки «Вверх» в мобильной версии Яндекс браузера, то это можно сделать так:
            const userAgent = window.navigator.userAgent;
            if (!(/YaBrowser/.test(userAgent) && /Mobile/.test(userAgent))) {
              // это не мобильный Яндекс браузер
              document.addEventListener('DOMContentLoaded', function() {
                // ...
              });
            }
            
            Но если опция «Стрелка возврата в начало страницы» выключена то в этом случае не будет отображаться как родная кнопка, так и кнопка «Вверх» от Яндекс браузера.
            1. Антон
              22 апреля 2021, 03:43
              Правильно ли я вас понял, что применив этот код и моя стрелка в мобильной версии Яндекса работать не будет?)
              1. Александр Мальцев
                22 апреля 2021, 03:57
                Нужно поместить в эту конструкцию весь код:
                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');
                      }
                    }
                  });
                }
                
                1. Антон
                  22 апреля 2021, 04:18
                  Александр, Супер! Но, правда не до понял этот момент…
                  --->Но если опция «Стрелка возврата в начало страницы» выключена то в этом случае не будет отображаться как родная кнопка, так и кнопка «Вверх» от Яндекс браузера. < —

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

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

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

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