Html 未为父div设置框阴影

我有一个div定义如下：

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

---

我做错了什么？

删除

#purple

和

之间的空格：悬停

。现在，您的CSS正在尝试向元素中悬停的任何元素添加一个

框阴影

。

#purple

您无法使用CSS（）设置音频播放器的样式，因此它只是对它所能做的进行阴影处理，即purpleBox div。

他没有尝试设置音频播放器的样式。他正在尝试为周围的div设置样式。我怎么能只为父级设置框阴影，而不为其中的元素设置框阴影？Thanks@user3739622实施我的改变将为您做到这一点。它将向ID为#purple的div添加长方体阴影，并且不应向该div内的任何元素添加长方体阴影。

#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;
}