CODEWITHSUNDEEP
jqueryhtml
George
George

Reputation: 3

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 div 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>

Upvotes: 0

Views: 110

Answers (2)

Alex
Alex

Reputation: 9041

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/

Upvotes: 0

Victor
Victor

Reputation: 9269

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?

Upvotes: 1

Related Questions