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?


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

            function () {
              function () {

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).


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


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{

    .tile:hover button{
    .tile:hover button:hover{

​ No script, no worries :)


Solution courtesy of: chrisgonzalez


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