没有为父div设置box-shadow

Question

我有一个如下定义的div：

<div id="purple" class="play">
        <audio id="purpleBoxAudioSorting" src="sounds/SortingPagePurpleBox.mp3"></audio>
        <p id="purpleBox">
            Content of the box
        </p>
</div>

我试图在悬停到div #purple时添加框阴影，但是它被设置为内部文本（#purpleBox）而不是父div。

这是CSS：

#purple {
    background: url('../images/purple box.png')  no-repeat center center; 
    position:absolute;
    left:344px;
    top:85px;
}


#purple :hover {
    box-shadow: 0 0 50px #FFF61D;
}

我在这里做错了什么？

Answer 1

删除#purple和:hover之间的空格。现在，您的CSS正在尝试向您在元素box-shadow中悬停的任何元素添加#purple。

Answer 2

你不能使用CSS（Custom CSS for <audio> tag?）设置音频播放器的样式，所以它只是遮蔽了它的内容，即purpleBox div。