javascript - 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 中并排放置的两个小 div。左边的小div里面有一个img。所有三个 div 都是 position: absolute。白色条出现在大 div 的内部，只要我将鼠标悬停在大 div 上，它就会一直存在。

Answer 1

box-shadows 的(推荐的)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