尝试使用悬停使图像消失，但文本挡住了

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

您可以更改隐藏图片的CSS规则的选择器，以便在#bite的鼠标悬停时触发。

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

完整代码：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;