在移动设备中模糊"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()工作-我确保事件处理程序是正确绑定的，它是。

请帮助我，因为我想让这个按钮回到它的默认样式

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;
  }
}