当图像悬停在图像上时，如何将覆盖在图像上的文本设置为 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>

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

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

当整个事物（图像和文本）悬停在上方时，CSS 使文本不透明度：0

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>

Answer 2

只要你selectors 是正确的，以下应该可以一直工作到 IE 6：

img.bio:hover{
opacity: 1; /* css standard */
    filter: alpha(opacity=100); /* internet explorer */
}

Answer 3

有很多方法可以做到这一点。假设您的文本跟随您的 img 元素，您可以使用 hover 伪类和 adjacent sibling selector 来定位文本并应用您的 CSS。

div {
  position: relative;
  display: inline-block;
}

.bio {
  position: absolute;
  top: 50%;
  text-align: center;
  width: 100%;
}

img:hover + .bio {
  opacity: 0;
}

<div>
  <img src="http://placehold.it/200x200" />
  <span class="bio">Text Here</span>
</div>