Change Class to Hover Class

I have a couple of nested divs and have set a CSS class for one of the interior divs. How would I go about setting off the hover version of the class (class.hover) when the user hovers of the outer d开发者_StackOverflow中文版iv, but not necessarily over the interior div's area.

I'm assuming this has to be done via JavaScript. I need some inputs with this.

Thanks

If I have understood your question correctly, you can do it with pure CSS:

CSS:

.outer:hover .inner
{
   // Your hover style here
}

HTML:

<div class="outer">
   <div class="inner">Button text</div>
</div>

Use the CSS :hover pseudo class. like so:

div.outer-div:hover > div.child-div { /* styles! */}

Here's a reference to the spec.

Try this:

CSS:

.hoverDiv:hover {
    background-color: red;
}

HTML:

<div class="hoverDiv">
    <div>This is the inner div </div>
</div>

that example will change the background color to red, but you can change it to whatever you want.

Unless I misunderstand the question, you're asking how to make a parent inherit the hover behavior of its child? If that's the question, it can't be done through CSS, at least not directly. Style inheritance goes downward in the document tree, not up.

One possible workaround would be (via a JQuery ready() function, for example) to add the hover style to any that has a child with a hover style. But this would obfuscate what's really happening to later developers. A much clearer way to design this would be simply to give the parent the hover class (& thus the hover behavior) in the first place, as some of the other replies show.

Hope that helps.