CODEWITHSUNDEEP
javascriptjquerycss
macsplean
macsplean

Reputation: 609

jquery failing to update background-color css

I have a grid generator, it uses Javascript and jQuery to generate blocks in a grid that are displayed with HTML and CSS. I am trying to set up a button that will change the :hover behavior of the blocks (specifically, change their background-color). I am unable to do this and I'm not sure why my code is not working. I will copy and paste it here and I apologize that it is very long. You can see it in action here: http://codepen.io/anon/pen

HTML

<html>
<head>
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script type="text/javascript" src="script.js"></script>
 <title> Odin #2 by Max Pleaner </title>
<link rel="stylesheet" type="text/css" href='stylesheet.css'>
</head>

<body>
<p> Welcome to my Odin Project #2 page. This is me showing off my basic JS and jQuery skills. If you move your mouse through the blocks you can see frogs come out of hiding. If you press the clear button below you can select a new number of blocks to fill the same space.</p>
<button id="button"> Generate a number of blocks of your liking that will position themselves to all fit in the 960px by 960px grid.  </button>
<button id="button2"> <strike> Click here to generate new blocks and make hovering on blocks produce random colors.</strike> Why isn't this button working?! It's drawing new blocks fine, but not changing the :hover style as intended. </button>



<div id="square_holder">
</div>
<img src="Q6w802v.jpg" alt="froggy" ></img>
</body>

</html>

CSS

body {
background-color: grey;
}

p {
color: aqua;
}

#square_holder {
width: 960px;
}

.block {
background-color: green;
display:inline-block;
border: 1px solid black;
width: 232px;
height: 232px;
}

.block:hover {
background-color: blue;
//background-image:url("Q6w802v.jpg");
background-size: contain;
}

JS

$(document).ready(function(){

  draw_grid(4);



  $('#button').click(function(){
      get_input();
  });

 $('#button2').click(function(){
        get_input();
        $('.block:hover').css("background-image", "none").css("background-color", get_random_color());

    }); 

});
 var draw_grid = function (blocks) {
        var totalno = Math.pow(blocks, 2);
        var dimension = (960 - 1 -(blocks * 2))/blocks;
        for(var i = 0; i < totalno; i++){
            $("#square_holder").append("<div class='block' id=" + i + "></div>");
        };
    $(".block").css("height", dimension).css("width", dimension);
    }


var get_input = function(){
        alert('Do you want to change the number of boxes?<b></b>');
    $('#square_holder').empty();
    var user_entry = prompt("What number do you choose?"); 
    alert("Watch in awe as the grid fills ..... ");
    draw_grid(user_entry);
    }


 var get_random_color = function() {
    var letters = '0123456789ABCDEF'.split('');
    var color = '#';
    for (var i = 0; i < 6; i++ ) {
        color += letters[Math.round(Math.random() * 15)];
    }
    return color;
};

Upvotes: 0

Views: 330

Answers (1)

PlantTheIdea
PlantTheIdea

Reputation: 16359

You need to use background, not background-color. Taken from the MDN page for background-image:

The CSS background-image property sets one or several background images for an element. The images are drawn on successive stacking context layers, with the first specified being drawn as if it is the closest to the user. The borders of the element are then drawn on top of them, and the background-color is drawn beneath them.

This translates into a declaration of background-image at all (even as none) will sit on top of background-color. Therefore, if you set background instead of background-color, it will supercede all other property-specific declarations.

Upvotes: 2

Related Questions