html - 子 div 悬停不起作用

Question

我有几个按钮，我试图仅在悬停时在其上使用 svg 过滤器。这些按钮位于父 div 内，当我将鼠标悬停在按钮上时，过滤器不起作用，但是当我将它们从父 div 中取出时，悬停有效。我需要它们在 div 中，以便它们可以响应父 div，如果它们在父 div 之外，它们会响应 diff

HTML

<div id="container">

<div id="namePlate">
<a href=""><img id="namePlateHover" src="images/namePlate.svg"/>
<h1>First Last</h1>
<img id="coin" src="images/coin.svg">
<p>X9999</p>
<img id="namePlateLogo" src="images/namePlateLogo.svg">
</a>
</div>

<div id="content">


<img id="loginlogo" src="images/RHDLoginLogo.png">



<!-- ADMIN LOGIN SCREEN -->
<div id="adminlogin">
<h1 id="adminname">Tester McAdmin</h1>
<form action="">
<div>
<input type="password" placeholder="Password" required="" id="password"/>
</div>
<div>
<input type="submit" value="SUBMIT PASSWORD" id="subpass" disabled/>
</div>
<div>
<input type="button" value="CANCEL" class="cancel"/>
</div>
</form>
</div>
<div id="copyright">
<p>Copyright &copy; 2014 All Rights Reserved.</p>
</div>

<div id="bottomBar">
<div id="backBtn">
<img src="images/lessonChapters/backBtn.svg">
</div>
<div id="progressBar">
<p>Section</p>
<img src="images/lessonChapters/progressBar.svg">
</div>
<div id="replayAudio">
<a href="">
<img src="images/lessonChapters/replayAudioDisabled.svg">
</a>
</div>

<div id="audioControl">
<a href="">
<img src="images/lessonChapters/pauseAudio.svg">
</a>
</div>

<div id="replayScene">
<a href="">
<img src="images/lessonChapters/replayScene.svg">
</a>
</div>
<a href="">
<div id="nextBtn">
<img src="images/nextBtn.svg"/>
</div>
</a>
</div>

</div>
</div>

CSS

#container{
position:relative;
margin:auto;
width:100%;
display:table;
overflow:hidden;
}

#content{
text-align:center;
background-image:url(images/lessonChapters/ch1Theme-01.svg);
background-size:cover;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-repeat:no-repeat;
background-position:center;
position:absolute;
left:3%;
right:3%;
height:auto;
text-align:center;
overflow:hidden;
margin:auto;
margin-top:25%;
transform:translateY(-10%);
-moz-transform:translateY(-30%);
-webkit-transform:translateY(-30%);
display:inline-block;
padding-right:-1%;
padding-bottom:4%;
}
#loginlogo{
z-index:3;
margin:auto;
margin-top:4%;
text-align:center;
max-width:60%;
max-height:35%;
overflow:auto;
padding-right:6.5%;
visibility:hidden;
}
h1{
font-family: 'card_eduregular';
font-weight: 400;
color:#4BA0B7;
}
form input{
padding-left:1%;
}
::-webkit-input-placeholder { color:#4BA0B7;
}
:-moz-placeholder { /* Firefox 18- */ color:#4BA0B7;  
}
::-moz-placeholder {  /* Firefox 19+ */ color:#4BA0B7;  
}
:-ms-input-placeholder {   color:#4BA0B7;  
}
button:active:enabled{
border: 2.5px solid #5FBDD7;
background-color:#5FBDD7;
}

#namePlate{
position:relative;
z-index:148;
width:40%;
margin-top:.5%;
float:right;
right:.5%;
-webkit-filter: drop-shadow(0px 0px 5px #000);
filter: drop-shadow(0px 0px 5px #000);
display:inline-block;
padding-bottom:100%;
}
#namePlate a{   
text-decoration:none;
}
#namePlate a:hover #namePlateHover{
-webkit-filter: drop-shadow(0px 0px 5px #FFF);
filter: drop-shadow(0px 0px 5px #FFF);
}
#namePlate h1{
font-family: "sweater-school",'card_eduregular',sans-serif;
font-style: normal;
font-weight: 400;
color:#FFFFFF;
font-size:4.5vmin;
transform:rotate(2.5deg);
-ms-transform: rotate(2.5deg);
-webkit-transform:rotate(2.5deg);
float:left;
margin-top:-18%;
margin-left:6%;
-webkit-filter: drop-shadow(1px 1px 1px #000);
filter: drop-shadow(1px 1px 1px #000);
z-index:149;
}
#namePlate p{
font-family: "sweater-school",'card_eduregular',sans-serif;
font-style: normal;
font-weight: 400;
color:#FFFFFF;
font-size:1.75vmin;
transform:rotate(2.5deg);
-ms-transform: rotate(2.5deg);
-webkit-transform:rotate(2.5deg);
margin-top:-12%;
margin-left:71%;
z-index:149;
}
#namePlate:hover p{
visibility:visible;
}
#coin{
position:absolute;
margin-top:-14%;
right:30%;
width:7%;   
-webkit-filter: drop-shadow(1px 1px 1px #000);
filter: drop-shadow(1px 1px 1px #000);
z-index:149;
}
#namePlateLogo{
position:absolute;
margin-top:-10.5%;
right:3%;
width:11.5%;
-webkit-filter: drop-shadow(1px 1px 1px #000);
filter: drop-shadow(1px 1px 1px #000);
z-index:149;
}

#bottomBar{
width:100%;
display:block;
z-index:10000;
}
#backBtn{
position:absolute;
z-index:150;
width:16.5%;
bottom:-.5%;
left:1%;
}
#backBtn:hover{
-webkit-filter: brightness(0.85);
filter: brightness(0.85);
}
#progressBar{
position:absolute;
z-index:150;
width:50%;
bottom:2.25%;
right:31.5%;
}
#progressBar p{
position:absolute;
z-index:149;
color:#000;
font-family: "sweater-school",'card_eduregular',sans-serif;
font-style: normal;
font-weight: 400;
font-size:1.75vmin;
left:9%;
margin-top:1.75%;
}
#audioControl{
position:absolute;
z-index:10000;
width:4.5%;
bottom:2.25%;
right:27%;
}
#audioControl:hover{
-webkit-filter: saturate(150%) brightness(0.75);
filter: saturate(150%) brightness(0.75);
}
#replayAudio{
position:absolute;
z-index:10000;
width:4.5%;
bottom:2.25%;
right:23.15%;
}
#replayScene{
position:absolute;
z-index:10000;
width:4.5%;
bottom:2.25%;
right:19.25%;
}
#nextBtn{
position:absolute;
z-index:149;
width:17%;
bottom:.25%;
right:1%;
-webkit-filter: brightness(0.75);
filter: brightness(0.75);
}
#nextBtn:hover:enabled{
-webkit-filter: brightness(0.85);
filter: brightness(0.85);
}
#nextBtn:enabled{
-webkit-filter: brightness(1);
filter: brightness(1);
}

.cancel{
background: -webkit-linear-gradient(#6FC5DC,#5FBDD7); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#6FC5DC,#5FBDD7); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#6FC5DC,#5FBDD7); /* For Firefox 3.6 to 15 */
background: linear-gradient(#6FC5DC,#5FBDD7); /* Standard syntax */
color:#FFF;
border:.35vmin solid #FFF;
border-radius:6px;
height:3.25vmin;
width:30%;
font-size:2vmin;
text-align:center;
z-index:15;
}
.cancel:hover{
border:.35vmin solid #BDE4EE !important;
}

/* Admin Login Screen */
#adminlogin{
z-index:25;
font-family: 'card_eduregular';
font-weight: 400;
color:#73C5DC;
font-size:1.5vmin;
max-width:40%;
max-height:18%;
margin:0 auto;
display:block;
text-align:left;
visibility:hidden;
}
#adminname{
float:left;
font-size:4vmin;
margin-bottom:1%    ;
margin-top:2.5%;
margin-left:9.5%;
}
#password{
width:75%;
margin-bottom:3%;
margin-left:9.5%;
height:3vmin;
border:.2vmin solid #60BFD9;
color:#4BA0B7;
font-family: 'card_eduregular';
font-weight: 400;
font-size:1.75vmin;
border-radius:6px;
vertical-align:middle;
}
#subpass{
margin-bottom:75%;
float:left;
margin-right:2%;
margin-left:9.5%;
background: -webkit-linear-gradient(#8BD0E3,#7FCBDF); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#8BD0E3,#7FCBDF); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#8BD0E3,#7FCBDF); /* For Firefox 3.6 to 15 */
background: linear-gradient(#8BD0E3,#7FCBDF); /* Standard syntax */
color:#BDE4EE;
border:.35vmin solid #FFF;
border-radius:6px;
height:3vmin;
width:50%;
font-size:1.75vmin;
text-align:center;
}
#subpass:enabled{
background: -webkit-linear-gradient(#6FC5DC,#5FBDD7); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#6FC5DC,#5FBDD7); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#6FC5DC,#5FBDD7); /* For Firefox 3.6 to 15 */
background: linear-gradient(#6FC5DC,#5FBDD7); /* Standard syntax */
color:#FFF;
}
#subpass:hover:enabled{
border:.35vmin solid #BDE4EE !important;
}
#adminlogin .cancel{
font-size:1.75vmin;
width:25%;
height:3vmin;
}


#copyright{
position:absolute;
bottom:0;
right:1%;
color:#A2B958;
font-family: 'card_eduregular';
font-weight: 400;
font-size:1.25vmin;
z-index:65;
visibility:hidden;
}

Answer 1

尝试

#replayAudioEnabled:hover

[编辑] 您的代码也适用于我。