Can't get <div> to change color using jQuery

Question

So, I've got a small website that I'm working on-- it's very simple, I'm just using it to EVENTUALLY play with C++ and Javascript COM interfaces and bitwise operators.

But I'm getting stuck on the simple stuff.

Here's my HTML, CSS, and jQuery code respectively (formatted for jsfiddle).

<title>Can you guess the combination?</title>
<body>
    <div>
        <label id="instructions">Guess the combination and you win!</label>
    </div>
    <div class="button"></div>
    <div class="button"></div>
    <div class="button"></div>
    <div class="button"></div>
    <div class="button"></div>
</body>

.button {
    background-color:#0F0;
    width:3em;
    height:3em;
    display:table-cell;
    float:left;
    margin:0.5em;
}
#instructions {
    font-family:roboto;
    font-color:#bbbbb;
}
a {
    font-family:roboto;
}

$(document).ready(function () {
    $(".button").hover(

    function () {
        $(this).css("background", "#ddd");
    },

    function () {
        $(this).css("background", "#ccc");
    });
});

Here is a jsfiddle of what I have, where hovering over the boxes should cause them to change color. I can't get this example working. It's very simple, but I can't seem to tell what I've done.

Later I'll have more advanced features, but as it is I'm tired of staring at this myself.

Do you have any ideas, {StackOverflow Member}?

you had missed including a js library...possible a google hosted cdn — San
– San, Commented Dec 5, 2013 at 17:57

cpreid · Accepted Answer · 2013-12-05 18:05:44Z

4

Use css for this

.button {background-color: #ddd;}
.button:hover {background-color: #ccc;}

answered Dec 5, 2013 at 18:05

cpreid

6214 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

jwarner112 Over a year ago

This is a solution, but the question was more about how to solve it using jQuery. Thank you, though!

scrblnrd3 · Accepted Answer · 2013-12-05 18:01:35Z

2

Updated JSFiddle here.

The problems were that jQuery wasn't included in the jsFiddle, there was no reason to have a $('document').ready(), and the correct CSS is background-color, not background

Code here

$(".button").hover(
    function () {
        $(this).css("background-color", "#ddd");
    }, 
    function () {
        $(this).css("background-color", "#ccc");
    }
);

answered Dec 5, 2013 at 18:01

scrblnrd3

7,4349 gold badges36 silver badges65 bronze badges

2 Comments

Milan and Friends Over a year ago

background is shorthand property if you wanna write e.g. background: #f5f5f5 url(../images/bg.png) it's correct & valid.

jwarner112 Over a year ago

And $('document').ready() is necessary because the jQuery is above the <div>s and I want it to load afterward, so it can include the loaded <div>s.

Souvik Banerjee · Accepted Answer · 2013-12-05 18:01:52Z

1

You need to concentrate to top-left of JS Fiddle and change the value of the first drop down as below image:

JS Fiddle Screen Shot

answered Dec 5, 2013 at 18:01

Souvik Banerjee

1972 gold badges5 silver badges15 bronze badges

2 Comments

jwarner112 Over a year ago

This got it working on jsfiddle, which means my in-house solution is simply lacking jQuery interpretation. Now I need to make it work for Javascript.

jwarner112 Over a year ago

Thanks to your answer, I was able to figure out the solution, which will be submitted and this turned into a community post.

Peri · Accepted Answer · 2013-12-05 18:11:45Z

1

This is working correctly 
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(document).ready(function () {
    $(".button").hover(

    function () {
        $(this).css("background", "#ddd");
    },

    function () {
        $(this).css("background", "#ccc");
    });
});
</script>
<style>
.button {
    background-color:#0F0;
    width:3em;
    height:3em;
    display:table-cell;
    float:left;
    margin:0.5em;
}
#instructions {
    font-family:roboto;
    font-color:#bbbbb;
}
a {
    font-family:roboto;
}
</style>
</head>
<body>
    <div>
        <label id="instructions">Guess the combination and you win!</label>
    </div>
    <div class="button"></div>
    <div class="button"></div>
    <div class="button"></div>
    <div class="button"></div>
    <div class="button"></div>
</body>
</html>

answered Dec 5, 2013 at 18:11

Peri

112 bronze badges

1 Comment

jwarner112 Over a year ago

Thanks to parts of your answer I was able to form my own. Please view my community wiki answer to see what my final solution was.

Diodeus - James MacFarlane · Accepted Answer · 2013-12-05 18:00:11Z

0

The correct CSS is color, not font-color.

To change background, use background-color.

answered Dec 5, 2013 at 18:00

Diodeus - James MacFarlane

115k33 gold badges164 silver badges180 bronze badges

1 Comment

Milan and Friends Over a year ago

That's not the question and this should be a comment :)

jwarner112 · Accepted Answer · 2013-12-05 19:10:07Z

The solution turned out to be multi-fold.

First, I did not have jQuery included in the project. I was running a script written in jQuery but without pre-loading that which lets the Javascript interpreter handle jQuery.

To amend this, just above the <script> that includes my jQuery work, I included this:

    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

Now the Javascript engine can handle jQuery commands.

Next, I was mis-labelling one of the CSS properties. Where in my jQuery script I had written:

$(document).ready(function(){
    $(".button").hover(
        function () {
            $(this).css("background", "#ddd");
        }, 
        function () {
            $(this).css("background", "#ccc");
        }
    );
});

I should have instead written:

$(document).ready(function(){
    $(".button").hover(
        function () {
            $(this).css("background-color", "#ddd");
        }, 
        function () {
            $(this).css("background-color", "#ccc");
        }
    );
});

(I had missed that background is not a CSS property, and what I meant was background-color)

A note when writing your own jQuery code: If your <script> tag is before your actual web code, make sure that the code inside the script is nested inside the line:

$(document).ready(x)

Because without that, the Javascript engine will execute operations on HTML objects that don't exist yet; With this line however, it will wait until all the HTML objects are loaded and modifiable.

Collectives™ on Stack Overflow

Can't get <div> to change color using jQuery

6 Answers 6

1 Comment

2 Comments

2 Comments

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

2 Comments

2 Comments

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related