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

Just use this css this will work DEMO HERE

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

Here's a css only solution.

.inner_box {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  box-shadow: 1px 1px 1px black;
}

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

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

You must reset the box-shadow back to its default state: none:

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