Change Unit Background Color on hover using Jquery

Question

I am trying to get a cell, within div table created in jquery, to change color when I hover over it and remain that color when the mouse leaves the cell.

I have tried adding a .hover command but when I add it the entire grid goes away.

Here is my code at JSfiddle: https://jsfiddle.net/davidtaylorjr/eemLsjg7/8/

 $(document).ready(function() { $(function() { for (var x = 0; x < 16; x++) { for (var y = 0; y < 16; y++) { $("<div>").addClass("unit").appendTo('#container'); } } }); $(".unit").hover() { $(this).css("background-color", "black"); }); }); 

 #container { background-color: lightblue; height: 192px; width: 192px; } .unit { background-color: white; height: 10px; width: 10px; margin: 1px; float: left; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="container"></div> 

Answer 1

Your logic is correct aside from two syntax issues. Firstly, you need to provide a function to hover() to be executed when the mousenter and mouseleave events fire. Secondly, you have nested document.ready handlers which you should unwrap. With those fixed it works fine.

Note however that you can make a couple of tweaks to improve the logic. Firstly the nested loops are redundant as you append the same HTML in all iterations. You can make this a single loop. Secondly it's better practice to keep all styling in CSS, so you can simply use addClass() to change the background colour. Lastly, the hover() creates two events, of which the mouseleave isn't needed for your code, so you can use just mouseenter to make it more efficient.

With all that said, try this:

 $(document).ready(function() { var html = '' for (var x = 0; x < 16 * 16; x++) { html += '<div class="unit"></div>'; } $(html).appendTo('#container'); $(".unit").mouseenter(function() { $(this).addClass('black'); }); }); 

 #container { background-color: lightblue; height: 192px; width: 192px; } .unit { background-color: white; height: 10px; width: 10px; margin: 1px; float: left; } .unit.black { background-color: #000; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="container"></div> 

Also note that you can remove the loop altogether and use the fill() method of an array to create your .unit elements:

var arr = new Array(256);
arr.fill('<div class="unit"></div>');
$('#container').html(arr.join(''));

Note that this is unsupported in IE and Safari, although a polyfill is available at MDN

Answer 2

The following will change the background color of your element when the mouse enters, and subsequently unbind the handler (so the code will only execute on first mouseenter - as specified in your description)

$(".unit").mouseenter(function() {
  $(this).css("background-color", "black");
  $(this).unbind('mouseenter');
});

jQuery mouseenter documentation for reference: https://api.jquery.com/mouseenter/#mouseenter-handler

Updated (and simplified for the sake of demonstration) fiddle: https://jsfiddle.net/eemLsjg7/9/