Add class on hover for kids in jQuery?

Question

I have a page that will have a series of tile sections, each of which will have one or more child divs.

I want when you go through the parent div, change its class and all divs to hover state.

I can easily make the parent div work, but can't get it: See Fiddle

$('.tile').hover( function () { $(this).addClass("hover"); $(this).find('.inner').addClass("hover"); }, function () { $(this).removeClass("hover"); $(this).find('.inner').removeClass("hover"); } ) 

All the examples that I see using "find" use the NAMED parent code; but I just need to use children of the current parent hovering over ($ this).

EDIT / UPDATE:

Part of my problem is that there is an image button inside the div. This button is supposed to have its OWN rollover. See Image from the designer below. I can get the first combination - all the blue and white buttons ... but with CSS I can't affect the PARENTS of the lus button, can I?

Answer 1

Instead of creating scripts, try using the CSS pseudo-class: hover over ALL your hanging elements, for example:

  .tile { width: 200px; height: 300px; background-color: yellow; margin: 20px; } .tile:hover { background-color: lightblue; } .inner { width: 200px; height: 50px; background-color: goldenrod; } .tile:hover .inner{ background-color:#369; } .tile:hover button{ color:#ff0000; } .tile:hover button:hover{ color:#00ff00; } 

No script, no worries :)

Fiddle: http://jsfiddle.net/67tCr/

Answer 2

Your code is fine ... you just need to reorder the css rules:

 .tile { width: 200px; height: 300px; background-color: yellow; margin: 20px; } .inner { width: 200px; height: 50px; background-color: goldenrod; } .hover { background-color: lightblue; } 

updated violin

Or you can be more specific

 .hover, .inner.hover { background-color: lightblue; } 

Answer 3

I would use the "children" function:

 $(".title").hover(function(){ $(this).addClass("hover"); $(this).children(".inner").addClass("hover"); },function(){ $(this).removeClass("hover"); $(this).children(".inner").removeClass("hover"); }); 

Here is the fiddle: http://jsfiddle.net/ckaufman/qXU7R/1/