First off, I apologize for the extremely elementary question. I am a complete newbie and have been teaching myself without any outside help. Be gentle.

I am completing an exercise from a free web dev course, and one of the steps is to add background color to some divs using jQuery. I have used both .hover and .mouseover methods, but neither are working. If I put the code outside of the $(document).ready brackets, nothing happens. If I put the code inside of it, all of my work looks like it's erased.

Here's the code:

```
$(".pixel").hover(function(){
  $(this).css("background-color", "yellow");
}, function() {
  $(this).css("background-color", "red");
});

```

Inside the $(document).ready function I created lots of divs with class="pixel", so I figured I should be able to select them using the above code.

Edit:

Again, I am sorry it seems I'm not including enough information. This is literally my first attempt at posting something here. I have nobody I can ask these questions to.

Here is the beginning of my .js file, before the .hover code I'm trying to run:

```
$(document).ready(function() {
  $("body").append("<div id='main'>");
  for (var i=0; i<256; i++) {
    $("#main").append("<div class='pixel'></div>");
  };
  $(".pixel").last().append("</div>");
});

```