css :hover only affect top div of nest

Question

Hi: got some html like:

<div class="class" >     <div class="class" >     </div> </div> 

And some css like:

div.class:hover {     border-width:2px;     border-style:inset;     border-color:red; } 

When I hover over the inner div, both divs get the red border. Is it possible to stop the propagation and get the red border on the inner div using css?

Thanks.

EDIT : starting with the answer pointed to by borrible I ended up with:

    $("div.class").mouseover(         function(e) {             e.stopPropagation();             $(this).css("border-color", "red");         }).mouseout(         function() {             $(this).css("border-color", "transparent");         }); 

Shame it's not css but does the job. Thanks everyone, didn't get what I wanted but learned lots of new stuff. Ain't stack overflow great :)

Answer 1

Have a look at http://jsfiddle.net/n6rzA/

Code from there:

<div class="c">     <div class="c"></div> </div>  .c:hover {border:solid 1px red} .c > .c:hover {border:solid 1px green} 

Answer 2

If the inner class is immediate child you can use the >. If it's not immediate child you can use space.

So in first case .class > class:hover { } and in second case .class .class:hover { }

First case : http://jsfiddle.net/wp4Jf/

Second case : http://jsfiddle.net/wp4Jf/2

Keep in mind that > works for ie8+