CODEWITHSUNDEEP
javascriptjquerycsshtml
jwarner112
jwarner112

Reputation: 1502

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

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}?

Upvotes: 0

Views: 349

Answers (6)

jwarner112
jwarner112

Reputation: 1502

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.

Upvotes: 0

Peri
Peri

Reputation: 11

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>

Upvotes: 1

cpreid
cpreid

Reputation: 621

Use css for this

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

Upvotes: 4

Souvik Banerjee
Souvik Banerjee

Reputation: 197

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

Upvotes: 1

scrblnrd3
scrblnrd3

Reputation: 7416

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");
    }
);

Upvotes: 2

Diodeus - James MacFarlane
Diodeus - James MacFarlane

Reputation: 114347

The correct CSS is color, not font-color.

To change background, use background-color.

Upvotes: 0

Related Questions