移動模糊「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; 
    } 
}