div css not changing on hover

Question

I have a grid of divs that I want to change when I hover over them. I'm trying to make it so the background color changes to white, and back to grey when the mouse is no longer hovering over them. I've been searching for a while, and I can't seem to find an answer that addresses what I'm looking for.

var d = ("<div class='square'></div>");
var value = [];


function createGrid(numSquares) {
    var area = $('#g_area');
    var squareSize = Math.floor(area.innerWidth() /numSquares);
    var n =0;
    for (var i = 0, len = (numSquares*numSquares); i < len; i++) {
        area.append(d);
        for (var j = 0; j < numSquares; j++) {
            $(d).attr('id', n);
            n++;
            value[n] = 0;
        }
    }


    $('.square').height(squareSize);
    $('.square').width(squareSize);
};

function resetGrid() {
    $(".square").remove();
}

$(document).ready(function () {
    createGrid(32);

});

$('.square').hover(function() {
    $(this).css({backgroundColor: '#FFFFFF'}) ;
    $(this).css({backgroundColor: '#C8C8C8'}) ;
});

jsfiddle: https://jsfiddle.net/psyonix/1g9p59bx/16/

j08691 · Accepted Answer · 2015-10-12 01:54:36Z

5

Your syntax for hover was incorrect, you need to pass two functions:

$('.square').hover(function () {
    $(this).css({
        backgroundColor: '#FFFFFF'
    });}, function(){
    $(this).css({
        backgroundColor: '#C8C8C8'
    });
});

jsFiddle example

answered Oct 12, 2015 at 1:54

j08691

208k33 gold badges269 silver badges281 bronze badges

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

2 Comments

Paul Randall Over a year ago

Thanks! That works, but only in jsfiddle. For some reason when I update the scripts locally nothing happens. Any clue as to why that may be? The code is exactly as it appears in the example.

Paul Randall Over a year ago

Naw, I just needed to wrap it properly.

Nick De Beer · Accepted Answer · 2015-10-12 01:58:04Z

1

You need to define the handlerOut. This should work. https://jsfiddle.net/1g9p59bx/18/

$('.square').hover(function () {
    $(this).css({
        backgroundColor: '#FFFFFF'
    });
}, function() {
    $(this).css({
        backgroundColor: '#C8C8C8'
    });
});

answered Oct 12, 2015 at 1:58

Nick De Beer

5,2906 gold badges37 silver badges50 bronze badges

6 Comments

Paul Randall Over a year ago

Thanks! That works, but only in jsfiddle. For some reason when I update the scripts locally nothing happens. Any clue as to why that may be? The code is exactly as it appears in the example.

Nick De Beer Over a year ago

Try clearing your local browser cache on the page. Ctrl + F5 usually works. Have a look at this: superuser.com/questions/36106/…

Paul Randall Over a year ago

Just tried that, no luck. So odd that it works just fine in jsfiddle.

Nick De Beer Over a year ago

Any errors in your console? F12 opens the console, check if there are any javascript errors.

j08691 Over a year ago

jsFiddle wraps your code in a window onload call by default.

|

hallie · Accepted Answer · 2015-10-12 01:57:23Z

0

Why not just put this on your css?

.square:hover
{
    background-color: #FFFFFF;
}

answered Oct 12, 2015 at 1:57

hallie

2,83320 silver badges28 bronze badges

Collectives™ on Stack Overflow

div css not changing on hover

3 Answers 3

2 Comments

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related