box-shadow not being set for parent div

Question

I have a div defined like following:

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

I am trying to add box shadow on hover to div #purple, but it is set for the text inside of it(#purpleBox) rather than the parent div instead.

here is the 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;
}

What am I doing wrong here?

score 0 · Accepted Answer · answered Jun 24 '14 at 17:48

0

Remove the space between #purple and :hover. Right now, your CSS is trying to add a box-shadow to any element you hover over within the element #purple.

answered Jun 24 '14 at 17:48

TylerH

20,799
66
75
101

How can I have the box-shadow only for the parent and not elements inside of it?Thanks – user3739622 Jun 24 '14 at 17:52
@user3739622 Implementing my change will do this for you. It will add the box-shadow to the div that has the ID of #purple, and it should not add a box-shadow to any elements within that div. – TylerH Jun 24 '14 at 17:55

score 0 · Answer 2 · edited May 23 '17 at 11:52

0

You cannot style audio players using CSS (Custom CSS for <audio> tag?), so it's just shadowing what it can, which is the purpleBox div.

edited May 23 '17 at 11:52

Community

1
1

answered Jun 24 '14 at 17:50

dcoli

183
1
1
14

He isn't trying to style the audio player. He is trying to style the surrounding div. – TylerH Jun 24 '14 at 17:50

box-shadow not being set for parent div

2 Answers2