호버를 사용하여 이미지를 사라지게하지만 텍스트가 사라지고 있습니다.

Question

tumblr에 마우스를 올리면 사라질 페이지 하단에 이미지를 추가하려고합니다. 사라지면 그 자리에 나타나는 전환 부분이 텍스트로 표시됩니다. 지금은 둘 다 이러한 일을하고 있지만 텍스트 블록이 마우스 위로 올려 져 있으면 이미지가 다시 나타납니다. 나는 그것을 완전히 투명하게 유지하고 싶다. 당신은 텍스트 방식에서 어떻게 든 볼 수 있듯이

이것은

#bite 
 
#bite a{ 
 
display:block 
 
} 
 
#bite .death { 
 
margin-top:0px;filter: alpha(opacity = 0); 
 
opacity:0;-webkit-transition: all 0.5s ease-out; 
 
-moz-transition: all 0.5s ease-out;transition: all 0.5s ease-out; 
 
} 
 

 
#bite:hover .death { 
 
margin-top:0px; 
 
-webkit-transition: all 0.8s ease-out; 
 
-moz-transition: all 0.8s ease-out; 
 
transition: all 0.8s ease-out; 
 
filter: alpha(opacity = 100); 
 
filter: alpha(opacity = 100); 
 
opacity:100; 
 
} 
 

 
#actualnews { 
 
font-family: 'Rock Salt'; cursive 
 
font-size:5px; 
 
color: #b8b8b8; 
 
width:150px; 
 
height:auto; 
 
padding-top:3px; 
 
border:1px solid#b8b8b8; 
 
margin-left: 30px; 
 
margin-top:10px; 
 
text-align:center; 
 
position:fixed; 
 
    right:145px; 
 
    bottom:70px; 
 
} 
 

 
#thekey img{ 
 
width:150px; 
 
margin-top: -40px; 
 
margin-left: 45px; 
 
position:fixed; 
 
    right:150px; 
 
    bottom:20px; 
 
filter: alpha(opacity = 100); 
 
opacity:100; 
 
-webkit-transition: all 0.8s ease-out; 
 
-moz-transition: all 0.8s ease-out; 
 
transition: all 0.8s ease-out; 
 
} 
 

 
#thekey img:hover { 
 
margin-top:0px; 
 
-webkit-transition: all 0.8s ease-out; 
 
-moz-transition: all 0.8s ease-out; 
 
transition: all 0.8s ease-out; 
 
filter: alpha(opacity = 0); 
 
filter: alpha(opacity = 0); 
 
opacity:0; 
 
}

<div id="bite"> 
 
<div id="thekey"><img src="{image:thekey}"></div> 
 
<div class="death"> 
 
<div id="actualnews"> 
 
<a href="www.winngstiel.tumblr.com/tagged/mine" font-color:#9d3e78>MY STUFF</a> 
 
<p> 
 
<a href="www.winngstiel.tumblr.com/tagged/edit" font-color:#9d3e78>PRETTY THINGS</a> 
 
</div> 
 
</div></div>

그것의 현재 상태입니다. 어떤 도움이 코딩으로 모든 것을 작동하는 방법에 매우 새롭기 때문에 크게 감사하겠습니다. 혼동이나 질문은 물어보십시오!

Answer 1

#bite의 호버 위에서 이미지를 숨기는 CSS 규칙의 선택자를 변경할 수 있습니다.

... 
#bite:hover #thekey img { 
... 

전체 코드 :

#bite 
 
#bite a{ 
 
display:block 
 
} 
 
#bite .death { 
 
margin-top:0px;filter: alpha(opacity = 0); 
 
opacity:0;-webkit-transition: all 0.5s ease-out; 
 
-moz-transition: all 0.5s ease-out;transition: all 0.5s ease-out; 
 
} 
 

 
#bite:hover .death { 
 
margin-top:0px; 
 
-webkit-transition: all 0.8s ease-out; 
 
-moz-transition: all 0.8s ease-out; 
 
transition: all 0.8s ease-out; 
 
filter: alpha(opacity = 100); 
 
filter: alpha(opacity = 100); 
 
opacity:100; 
 
} 
 

 
#actualnews { 
 
font-family: 'Rock Salt'; cursive 
 
font-size:5px; 
 
color: #b8b8b8; 
 
width:150px; 
 
height:auto; 
 
padding-top:3px; 
 
border:1px solid#b8b8b8; 
 
margin-left: 30px; 
 
margin-top:10px; 
 
text-align:center; 
 
position:fixed; 
 
    right:145px; 
 
    bottom:70px; 
 
} 
 

 
#thekey img{ 
 
width:150px; 
 
margin-top: -40px; 
 
margin-left: 45px; 
 
position:fixed; 
 
    right:150px; 
 
    bottom:20px; 
 
filter: alpha(opacity = 100); 
 
opacity:100; 
 
-webkit-transition: all 0.8s ease-out; 
 
-moz-transition: all 0.8s ease-out; 
 
transition: all 0.8s ease-out; 
 
} 
 

 
#bite:hover #thekey img { 
 
margin-top:0px; 
 
-webkit-transition: all 0.8s ease-out; 
 
-moz-transition: all 0.8s ease-out; 
 
transition: all 0.8s ease-out; 
 
filter: alpha(opacity = 0); 
 
filter: alpha(opacity = 0); 
 
opacity:0; 
 
}

<div id="bite"> 
 
<div id="thekey"><img src="{image:thekey}"></div> 
 
<div class="death"> 
 
<div id="actualnews"> 
 
<a href="www.winngstiel.tumblr.com/tagged/mine" font-color:#9d3e78>MY STUFF</a> 
 
<p> 
 
<a href="www.winngstiel.tumblr.com/tagged/edit" font-color:#9d3e78>PRETTY THINGS</a> 
 
</div> 
 
</div></div>