没有为父 div 设置 box-shadow

Posted 2023-02-25

【中文标题】没有为父 div 设置 box-shadow

【英文标题】：box-shadow not being set for parent div

【发布时间】：2014-06-24 17:46:19

【问题描述】：

我有一个如下定义的 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;

我在这里做错了什么？

【参考方案1】：

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

【讨论】：

我怎样才能让 box-shadow 只用于父级而不是其中的元素？谢谢

@user3739622 实施我的更改将为您完成此操作。它会将 box-shadow 添加到 ID 为 #purple 的 div 中，并且不应将 box-shadow 添加到该 div 中的任何元素。

【参考方案2】：

您无法使用 CSS (Custom CSS for <audio> tag?) 设置音频播放器的样式，因此它只是隐藏了它可以使用的样式，即紫色框 div。

【讨论】：

他并没有尝试设置音频播放器的样式。他正在尝试为周围的 div 设置样式。