小孩div懸停不工作

我有一對夫婦的按鈕，我試圖只有在懸停時使用SVG過濾器。這些按鈕位於父div的內部，當我將鼠標懸停在按鈕上時，過濾器不起作用，但是當我將它們從父div移出時，懸停就起作用。我需要他們在div裏面，使他們能夠與父DIV迴應，如果他們的父母DIV他們的反應diff的小孩div懸停不工作

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

來源

2015-01-20 Picklz

嗯，你的代碼適合我：http://codepen.io/anon/pen/QwvQXa。也許別的東西導致了這個問題。 – Marcelo 2015-01-20 19:19:55

你在測試什麼瀏覽器？ – Jhecht 2015-01-20 20:32:34

我已經在Chrome，Firefox和Safari上測試過它。這些都不起作用。 – Picklz 2015-01-20 20:36:03

外嘗試

#replayAudioEnabled:hover

[編輯] 您的代碼也適用於我。

來源

2015-01-20 19:09:07 Shay

我試過了，但它不起作用。 – Picklz 2015-01-20 20:11:53

我只是將代碼更新爲完整的代碼。 – Picklz 2015-01-20 20:36:24

我明白了！ #nameplate div有一個100％的填充底部。我將它改爲margin-bottom，它工作。填充底部使得它基本上是其他div上的內容。

來源

2015-01-20 21:11:07 Picklz

小孩div懸停不工作

回答

相關問題