How do I remove a box-shadow effect from an element when another element is hovered?

Question

Structure:

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

.inner_box has a box-shadow effect. When .box is hovered I want to remove shadow effect from .inner_box. Besides using JQuery, is there another way I can 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;
}