Add class on hover for children in jQuery?

Question

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

I want to, when rolling over the parent div, change the class of it and all divs to a hover state.

I can easily get the parent div working, but can't get the child: 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 I see using "find" use a NAMED parent; but I just need to use the children of whichever current parent is being hovered over ($this).

EDIT/UPDATE:

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

Answer 1

Instead of scripting this, try using CSS pseudo-class :hover on ALL your hovered elements like:

    .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 re-order your 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 fiddle

Or you can be more specific

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