jquery ne parvient pas à mettre à jour css de couleur de fond

J’ai un générateur de grid, il utilise Javascript et jQuery pour générer des blocs dans une grid qui sont affichés avec HTML et CSS. J’essaie de configurer un bouton qui changera le comportement de survol des blocs (en particulier, changer leur couleur de fond). Je suis incapable de faire cela et je ne sais pas pourquoi mon code ne fonctionne pas. Je vais le copier et le coller ici et je m’excuse, c’est très long. Vous pouvez le voir en action ici: http://codepen.io/anon/pen

HTML

         
 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.
  Generate a number of blocks of your liking that will position themselves to all fit in the 960px by 960px grid.    Click here to generate new blocks and make hovering on blocks produce random colors. Why isn't this button working?! It's drawing new blocks fine, but not changing the :hover style as intended.  
 
    

CSS

• faire défiler la page entière sous une certaine hauteur en haut sans barre de défilement
• jQuery animer la position d’arrière-plan, ne fonctionnant pas dans ie
• jQuery .css ne fonctionne pas uniquement dans Chrome
• La focalisation et un élément doivent refléter un autre élément en CSS
• L’événement de clic Safari et l’état actif ne peuvent pas coexister

 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("http://soffr.miximages.com/javascript/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("
"); }; $(".block").css("height", dimension).css("width", dimension); } var get_input = function(){ alert('Do you want to change the number of boxes?'); $('#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; }; 

• jQuery: fermeture en fondu, modification de l’image d’arrière-plan, puis ouverture en fondu
• Barre de navigation fixe avec Twitter Bootstrap 3
• Superposition du bouton de fermeture sur le bouton Facebook, tout en conservant les fonctionnalités
• Comment puis-je avoir un arrière-plan pour toutes les diapositives dans fullPage.js?
• Comment désactiver le défilement du corps dans la superposition de navigation et l’activer dans le corps?