Question

我正在使用Bootstrap来创建一个响应式页面，因为该页面可能会有点长，所以我添加了一个浮动在页面底部的“Back to Top”按钮。标记是：

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

在移动设备

1 个答案: