html - 当图像悬停在图像上时，如何将覆盖在图像上的文本的不透明度设置为 0？

Question

好的，我尝试在跨度中设置文本，当滚动 div(由图像和其中的文本组成)时，会将跨度不透明度设置为 0。不过它不起作用，这是我的代码。

HTML

<div id="phild">
     <td class="bio"> <img class="bio" src="phil.jpg" />
        <span id="phils"><h2 id="philh">Phil</h2></span>     
     </td> 
</div>

CSS 使图像不透明度:悬停时为 1

div#phild :hover{
opacity: 1;
transition: all .2s linear;
}

当整个事物(图像和文本)悬停在上方时，使文本不透明度为 0 的 CSS

div#phild:hover span#phils{ 
opacity:0; 
}

Answer 1

如果文本位于图像上方，则不能使用 img:hover 来获得所需的效果，因为当光标位于文本上时，它不会注册为悬停在图像上.您可以将图像和文本放入某物中，然后在鼠标悬停时让文本消失

.bio {
  position:relative;
  float:left;
}
.bio img {
  display:block;
}
.bio span {
  position:absolute;
  bottom:0;
  left:0;
  transition: all .2s linear;
}
.bio:hover span {
  opacity:0;
}

<div class="bio">
  <img src="http://placehold.it/100x100" />
  <span>Text</span>
</div>