Add class on hover for children in jQuery?

css, hover, jquery, jquery-hover

Solution

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/

Problem

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?

Original source