Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Add class on hover for children in jQuery?

Add class on hover for children in jQuery?

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?

Problem courtesy of: Steve

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/

Solution courtesy of: chrisgonzalez

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Add class on hover for children in jQuery?

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×