CSS插入阴影不起作用，创建垂直线

Question

试图创建一个嵌入阴影在一个div悬停在它上面，但唯一显示的是在左侧的白色垂直栏。我正在使用Chrome 36.0.1985.143。如果我用普通的阴影代替插入阴影，它可以很好地工作。

HTML：

<div id="innerContent"> 
    <div id="digSynth" class="selection"> 
     <div class="thumbnail"> 
      <img src="Digital Synthesizer/thumbnail.png"> 
     </div> 
     <div class="description"> 
      <span class="infoItem">Control the pitch of a speaker by adjusting the light level</span> 
     </div> 
    </div> 
    <div id="ledDom" class="selection"> 
    </div> 
</div> 

JS：

$(document).ready(function(){ 

    //highlight on hover mechanism 
    $(".selection").mouseover(function(){ 
     $(this).css("box-shadow", "inset 0.8em 0em white"); 
    }); 
    $(".selection").mouseout(function(){ 
     $(this).css("box-shadow", ""); 
    }); 

}); 

它基本上是两个小的div并排较大的DIV中。在左边的小格子里面有一个img。所有三个div都是绝对的。白色条出现在大型div的内部，并保持不变，直到我将鼠标悬停在大型div上。

Answer 1

的箱阴影（recomended）CSS语法如下：

box-shadow: (the extra-options can be here too but it's considered a bad practice so don't do that) [x-offset y-offset blur] extra-options 

的[方括号之间的事情]必须按照这个顺序去（他们必须彼此相邻太）

.selection { 
    transition:box-shadow 0.3s; 
} 
.selection:hover { 
    box-shadow:.8em .8em 1.6em red inset; 
} 

JSFiddle