Selecting a div within in a div

Apologies for simple question I am just starting out. I have a navigation div and 4 button class divs inside it.

I want to be able to change background class for the appropriate button d开发者_JAVA技巧iv when mouseover/enter etc.

This is the Jquery I have so far

<script>
$(document).ready(function(){
  $("#nav").mouseenter(function(){
   $(this).stop(true,true).find(".button").fadeTo(200,0.5,function(){
    $("#nav").mouseleave(function(){
     $(this).stop(true,true).find(".button").fadeTo(200,1);
    });
   });
  });
 }); 
 </script>

---

I think you may want this:

<script>
$(document).ready(function(){
  $("#nav .button").mouseenter(function(){
   $(this).stop(true,true).fadeTo(200,0.5,function(){
    $(this).mouseleave(function(){
     $(this).stop(true,true).fadeTo(200,1);
    });
   });
  });
 }); 
 </script>

I don't know what this does nor have tested it, but the point is I think you want to add the event handlers to the buttons themselves, not the container. Is that so?

---

Try this:

$('#nav').find('.button').each(function(){
    $(this).mouseover(function(){
        $(this).attr('style', 'background:url(http://jsfiddle.net/favicon.gif) top left');
    });
    $(this).mouseout(function(){
        $(this).attr('style', 'background:none');
    });
});

You can see it working here - http://jsfiddle.net/FDQXa/