html - 没有为父 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 中悬停的任何元素。