Question

我正在Rails上构建一个非常简单的静态站点。我正在使用Bootstrap导航栏。 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文件中删除！important语句，否则这不起作用。但是，如果我从SASS文件中删除！important语句，链接将以灰色显示。它在您悬停后工作并返回白色，但在开始时它们是灰色的，这不是我想要的。有人可以帮忙吗？我不知道该怎么做。

Answer 1

如果删除SASS中的！important语句并在HTML页面中的链接上进行内联样式，则可以正常工作。

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

JQuery和Bootstrap的麻烦！重要的SASS

1 个答案: