Вставка тени CSS не работает, создавая вертикальную линию

Question

Пытается создать вставную тень в div, зависающем над ней, но единственное, что появляется, это вертикальная панель белого цвета с левой стороны 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 слева есть img. Все три divs имеют положение: абсолютное. Белая полоска появляется внутри большого div и остается до тех пор, пока я удерживаю курсор мыши над большим div.

Answer 1

(рекомендуется) 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