CODEWITHSUNDEEP
javascriptjquerycss
Paul Randall
Paul Randall

Reputation: 133

div css not changing on hover

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/

Upvotes: 0

Views: 69

Answers (3)

Nick De Beer
Nick De Beer

Reputation: 5262

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

Upvotes: 1

hallie
hallie

Reputation: 2845

Why not just put this on your css?

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

Upvotes: 0

j08691
j08691

Reputation: 207891

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

Upvotes: 5

Related Questions