CODEWITHSUNDEEP
javascriptjquerybuttonhover
Kevin Ciminelli
Kevin Ciminelli

Reputation: 130

Changing Background Color Using JQuery on Hover

I'm currently coding and programming a website using Ruby on Rails but having some issues with a fairly basic element within the page. Basically, my backend system will contain a color that will change each month, that color is then pulled and used throughout the website for multiple elements. This is one of those elements...

I have a div with an image inside that will soon be a link. I want to use JS or JQuery to make this element change it's background color on hover. I know it's simple but, for some reason, I can't figure this out. I'll include a jsfiddle of the entire setup:

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/

Thanks in advance for the help!

Upvotes: 1

Views: 927

Answers (2)

James French
James French

Reputation: 26

Load jQuery in the Frameworks & Extensions menu on the left and this fiddle works fine. $ is the jQuery function and when you see it it means that jQuery is required.

However, unless you're targeting IE below version 7 I would just use the pure CSS solution with :hover

Upvotes: 0

colestrode
colestrode

Reputation: 10658

You can do this with just CSS using the :hover pseudo-class:

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

Working Demo

Otherwise, your jQuery is fine. It looks like you just forgot to import jQuery in your jsFiddle example.

Upvotes: 4

Related Questions