在悬停时使用 JQuery 更改背景颜色答案

【问题标题】：Changing Background Color Using JQuery on Hover在悬停时使用 JQuery 更改背景颜色
【发布时间】：2013-08-10 21:41:10
【问题描述】：

我目前正在使用 Ruby on Rails 对网站进行编码和编程，但在页面中相当基本的元素方面存在一些问题。基本上，我的后端系统将包含一个每个月都会改变的颜色，然后该颜色会被拉出并在整个网站中用于多个元素。这是这些元素之一......

我有一个 div，里面有一张图片，很快就会变成一个链接。我想使用 JS 或 JQuery 使这个元素在悬停时改变它的背景颜色。我知道这很简单，但由于某种原因，我无法弄清楚。我将包含整个设置的 jsfiddle：

HTML：

<div class="contribute_buttons">
    <img src="https://s3.amazonaws.com/static-passenger2/images/shop_and_support.png">
</div>

CSS：

.contribute_buttons {
    width: 300px;
    height: 39px;
    float: left;
    background-color: #393839;
    margin-top: 5px;
    margin-bottom: 15px;
}

JAVASCRIPT：

$(document).ready(function() {
    var colorOrig=$(".contribute_buttons").css('background');
    $(".contribute_buttons").hover(
    function() {
        //mouse over
        $(this).css('background', '#AAEE00')
    }, function() {
        //mouse out
        $(this).css('background', colorOrig)
    });
});

http://jsfiddle.net/EQeMs/

提前感谢您的帮助！

【问题讨论】：

你在那个小提琴中检查过控制台吗？
您的小提琴不起作用，因为您没有包含 jQuery 库。 jsfiddle.net/EQeMs/1 为我工作。
没意识到，盯着这个太久了-_-谢谢！

标签： javascript jquery button hover

【解决方案1】：

您可以使用 :hover 伪类仅使用 CSS 来做到这一点：

.contribute_buttons:hover {
    background-color: #AAEE00;
}

Working Demo

否则，您的 jQuery 很好。看来您只是忘记在 jsFiddle 示例中导入 jQuery。

【讨论】：

忘了补充：我关心兼容性，所以如果我可以使用 js 或 jquery 来做这个，我更喜欢那个。谢谢！
你的意思是浏览器兼容性吗？除非您需要支持 IE6（除非您在尚未升级的企业中，否则您不应该支持），这种 CSS 方法将与 jQuery 一样兼容。

【解决方案2】：

在左侧的 Frameworks & Extensions 菜单中加载 jQuery，这个 fiddle 可以正常工作。 $ 是 jQuery 函数，当你看到它时，它意味着 jQuery 是必需的。

但是，除非您的目标是 IE 版本 7 以下，否则我只会使用带有 :hover 的纯 CSS 解决方案

【讨论】：