在移动端模糊"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;
  }
}