How to remove shadow shadow effect from an element when another element hangs?

Question

Structure:

<div class="box"> <div class="inner_box"> </div> </div> 

.inner_box has a shadow shadow effect. When .box is hovering, I want to remove the shadow effect from .inner_box. Besides using jQuery, is there any other way to do this, preferably CSS3?

Please also show me examples of how I can do this in jQuery. Thanks!

Answer 1

Just use this css, this will work DEMO HERE

 .box:hover .inner_box { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } 

Answer 2

Here is only css solution.

  .box:hover .inner_box { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } 

Demo

Answer 3

You should reset box-shadow to return to its default state: none :

 .box:hover .inner_box { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; }