JQuery 悬停背景颜色答案

【问题标题】：JQuery hover backroundColorJQuery 悬停背景颜色
【发布时间】：2017-06-02 21:25:39
【问题描述】：

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

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 函数有效。我不知道会发生什么。救命！

【问题讨论】：

我想更改 div，而不是图标。谢谢你的想法
为什么不使用.css('background-color','#404a87')？它必须是js背景颜色吗？ #facebook:hover{background-color:#404a87; -webkit-transition: background-color 0.4s; transition: background-color 0.4s}
尝试使用背景色而不是背景色。是的，我知道 backgroundColor“应该”工作 - 但无论如何都要尝试。

标签： jquery css ruby-on-rails

【解决方案1】：

不确定它是否会起作用，但请尝试：

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

而不是使用 .hover

【讨论】：