Question

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

提前感谢您的帮助！

Answer 1

您只需使用:hover伪类：

进行CSS即可

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

<强> Working Demo

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

Answer 2

在框架中加载jQuery＆amp;左侧的扩展菜单和这个小提琴工作正常。 $是jQuery函数，当你看到它时意味着需要jQuery。

但是，除非你的目标是低于版本7的IE，否则我只会使用纯CSS解决方案：hover

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

2 个答案: