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

Posted 2023-05-08

【中文标题】在悬停时使用 JQuery 更改背景颜色

【英文标题】：Changing Background Color Using JQuery on Hover

【发布时间】：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 为我工作。

没意识到，盯着这个太久了-_-谢谢！

【参考方案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 解决方案