Blur «a» в мобильном телефоне

Question

Я использую Bootstrap для создания отзывчивой страницы, и поскольку эта страница может немного задержаться, я добавил кнопку «Вверх», которая плавает в нижней части страницы. Разметка для этого является:

<a href="#" class="back-to-top"><i class="fa fa-chevron-up" aria-hidden="true"></i></a> 

Стили у меня есть для этого являются:

a.back-to-top, 
a.back-to-top:active, 
a.back-to-top:visited, 
a.back-to-top:focus { 
    display: none; 
    width: 60px; 
    height: 60px; 
    font-size: 2em; 
    text-align: center; 
    color: #FFFFFF; 
    position: fixed; 
    z-index: 999; 
    right: 20px; 
    bottom: 20px; 
    background: #F4AA00; 
    -webkit-border-radius: 30px; 
    -moz-border-radius: 30px; 
    border-radius: 30px; 
    text-decoration: none; 
} 

a.back-to-top:hover { 
    color: #FFFFFF !important; 
    background: #562E18; 
} 

А вот сценарий Jquery я связан с этим элементом, а также:

$(window).scroll(function() { 
    if($(".table-wrapper").length) { 
     if($(window).scrollTop() > $(".table-wrapper").offset().top) { 
      $('a.back-to-top').fadeIn('fast'); 
     } else { 
      $('a.back-to-top').fadeOut('fast'); 
     } 
    } 
}); 

$("body").on("click", "a.back-to-top", function(e) { 
    e.preventDefault(); 
    $('html, body').animate({ 
     scrollTop: $(".table-wrapper").offset().top 
    }, 1000); 
}); 

$("body").on("mouseup", ".btn, a", function() { 
    $(this).blur(); 
}); 

На мобильный телефон, когда я нажимаю кнопку «Вверх» (в данном случае элемент a), он сохраняет стиль, который он имеет для :hover. Единственный способ вернуть элемент к стилю по умолчанию - это выйти из него. Это не выглядит так: blur() works - Я удостоверился, что обработчик событий правильно связан и он есть.

Пожалуйста, помогите мне, так как мне бы хотелось, чтобы эта кнопка возвращалась к стилю по умолчанию.

Answer 1

Вы можете попробовать обернуть эффект зависания в медиа-запросе, чтобы он применим только к размеру рабочего стола.

Возможно, это не то решение, которое вы ищете, но если вы не используете браузер, спрятанный на рабочем столе, это более простой ответ.

// Apply only when the screen is 768px or wider. 
@media screen and (min-width: 768px) { 
    a.back-to-top:hover, 
    a.back-to-top:active { 
    color: #FFFFFF !important; 
    background: #562E18; 
    } 
}