移动模糊“a”

我使用Bootstrap来创建一个响应页面，并且由于该页面可以变得有点长，我添加了一个浮动在页面底部的“返回顶部”按钮。该标记是：移动模糊“a”

<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()的作品 - 我确保事件处理程序被正确绑定，并且它是。

请帮助我，因为我希望该按钮可以恢复为默认样式。

来源

2016-11-09 uom-pgregorio

您可以尝试在媒体查询中包装悬停效果，以便它仅适用于桌面大小调整。

这可能不是您正在寻找的解决方案，但除非您使用浏览器在桌面上缩小，否则这是一个更简单的答案。

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

来源

2016-11-09 16:42:53

但是，在移动设备上，如果点击它，元素将不会改变颜色。 –

尝试将其他CSS选择器中的活动伪类添加到媒体查询中的那个选择器中？我更新了答案。 –

移动模糊“a”

回答

相关问题