jQuery悬停背景颜色

Question

我正在 Rails 5 应用程序中构建一组社交媒体链接。当我将鼠标悬停在链接容器 div 上时，我希望它的背景颜色变为蓝色。 (您不能将 CSS :hover 用于 backgroundColor fyi)

一定是 Rails 5 中的某些东西阻止了它的工作。我在另一个应用程序中确实使用了这个确切的代码，并且效果很好。我不知道发生了什么。这是我的 HTML:

<div id="facebook">
    <%= icon("facebook", id: 'facebook_icon') %> 
</div>

这是我的 application.js 文件的相关部分:

//= require jquery
//= require bootstrap-sprockets
//= require jquery_ujs
//= require turbolinks
//= require_tree .

$(document).on('turbolinks:load', function (){

$('#facebook').hover(
    function(){
        $(this).animate({'backgroundColor': '#404a87'},400);
    },
    function(){
        $(this).animate({'backgroundColor': '#393939'},400);
    }
);
});

此文件中的其他 JavaScript 函数有效。我不知道会发生什么。帮助!

Answer 1

不确定它是否有效，但请尝试:

$('#facebook').on("mouseover", function(){..}

而不是使用 .hover