css :hover only affect top div of nest

Question

Hi: got some html like:

And some css like:

Answer 1

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+