麻煩與jQuery和Bootstrap！重要SASS

我建立on Rails的一個非常簡單的靜態站點。我正在使用Bootstrap導航欄。引導程序鏈接默認顏色是灰色的，所以我在SASS文件中使用這個重置密碼：麻煩與jQuery和Bootstrap！重要SASS

nav { 
    a { 
     color: white !important; 
    } 
}

不是火箭科學。當我嘗試使用JQuery覆蓋該設置時出現問題。當人們將鼠標懸停在鏈接上時，我希望鏈接變成藍色。這是我的JQuery：

$(document).on('turbolinks:load', function() { 
$('a').hover(function(){ 
     $(this).animate({'color':'#00ddda !important'},400); 
    }, 
    function(){ 
     $(this).animate({'color':'white !important'},400); 
}); 
})

這並不工作，除非我從原來的SASS文件中刪除了重要的發言！但是如果我從SASS文件中刪除！important語句，鏈接就會變灰。它的工作原理後，您將鼠標懸停並返回到白色，但在一開始，他們是灰色的，這不是我想要的。有人可以幫忙嗎？我不知道該怎麼做。

來源

2017-02-16 J Seabolt

您是否嘗試過使用css nav a：hover {color：＃00ddda！important; }，也許你不能重寫CSS！重要的風格，但你可以考慮刪除！重要的語句和編輯選擇器，以便它具有必要的CSS特殊性，以獲得應用的樣式閱讀關於特異性 http：// cssspecificity .COM/ 瞭解的CSS：懸停選擇 https://www.w3schools.com/cssref/sel_hover.asp –

是的，我原來只是這樣做。我想要一個JQuery轉換，不僅僅是一個簡單的改變。似乎必須有一種方法來做到這一點，而不會恢復爲純CSS。 –

你需要重寫！重要的風格，具有更高特異性的風格。所以不要使用'$（'a'）''，你可能想要使用更具體的div，例如'$（'nav a'）'或者甚至更具體的東西。因此，檢查有關的特異性，我送你這些鏈接和下面的討論 http://stackoverflow.com/questions/11178673/how-to-override-important#11178731 –

如果卸下SASS的！重要發言，並做內聯樣式，而不是在HTML頁面中的鏈接，它的工作原理。

<li class="nav_item nav_link"><%= link_to "Home", root_path, style: 'color: white !important' %></li>

來源

2017-02-16 19:11:30

麻煩與jQuery和Bootstrap！重要SASS

回答

相關問題