Зависает :hover при нажатии на моб. устройствах
2.6K
12
Всем привет! Подскажите как можно исправить эффект закисания :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. Можно вообще ничего не убирать и не прописывать медиа-запросы. Как по мне так лучший вариант. Оставить так (не вижу здесь ничего такого, элемент просто таким образом будет реагировать на моё касание):
.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; /* цвет заднего фона при наведении */ }Если вы хотите отключить отображения кнопки «Вверх» в мобильной версии Яндекс браузера, то это можно сделать так:
const userAgent = window.navigator.userAgent; if (!(/YaBrowser/.test(userAgent) && /Mobile/.test(userAgent))) { // это не мобильный Яндекс браузер document.addEventListener('DOMContentLoaded', function() { // ... }); }Но если опция «Стрелка возврата в начало страницы» выключена то в этом случае не будет отображаться как родная кнопка, так и кнопка «Вверх» от Яндекс браузера.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'); } } }); }--->Но если опция «Стрелка возврата в начало страницы» выключена то в этом случае не будет отображаться как родная кнопка, так и кнопка «Вверх» от Яндекс браузера. < —
Правильно ли я понимаю:
Как я понял у Яндекс пользователя должна быть включена опция «Стрелка возврата в начало страницы», только тогда применив этот java код который вы мне подсказали эта стрелка у пользователя исчезнет и останется мой вариант. Но, если у пользователя эта опция отключена, то не будет вообще ни каких стрелок вверх ни Яндекса ни моей?
P.S По факту, мне кажется она у большинства стоит по умолчанию, т.е включена. Например я не знаю, где эта опция включается и выключается, думаю большинство тоже этого не знает…
Информации о том, как получить программно (в JavaScript) значение этой опции не встречал.
Самая опция находится в настройках и доступна для отключения. По факту, скорее всего правы, большинство пользователей редко что-то меняет.