css實現 當鼠標移到input的時候，input框出現陰影，當移動到button的時候，input框的陰影消失，button框出現陰影

<meta charset="utf-8" />
<style type="text/css">
div{overflow: hidden;}
div.search_box input{
    float:left;
    width:200px;
    height:50px;
    box-sizing:border-box;
    padding:0 40px 0 10px;
    line-height:50px;
    border:0;
    border-left:1px solid #ddd;
    outline:none;
}
.search_box>form>button{
    float:right;
    width:40px;
    height:50px;
    border:0;
    border-right:1px solid #ddd;
    background:url(search1x.png) no-repeat center;
    position:absolute;
    left:160px;
}
 div.search_box input:hover{
    box-shadow: inset 0 -2px 2px #3b6caa,inset 2px 0 2px #3b6caa,inset -2px 0 2px #3b6caa;
}
div.search_box button:hover{
    box-shadow:inset 0 -2px 2px #3b6caa, inset 2px 0 2px #3b6caa, inset -2px 0 2px #3b6caa;
    cursor:pointer;
}
</style>




<div class="search_box">
     <form>
          <input type="text" placeholder="Search" >
          <button type="submit" ><button>
     </form>
</div>