1

我目前正在使用 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/

在此先感谢您的帮助！

4

2 回答 2

4

您可以使用:hover伪类仅使用 CSS 执行此操作：

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

工作演示

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

于 2013-08-09T00:46:14.193 回答
0

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

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

于 2013-08-09T00:52:45.883 回答