Question

在鼠标悬停在div上时尝试在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都是位置：绝对。白色条出现在大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

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

1 个答案: