Question

好的我尝试在一个范围内设置文本，当div（由图像和文本组成）滚动时，它会将span opacity设置为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;
}

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

上时为0

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

Answer 1

只要你selectors是正确的，以下内容应该一直有效回到IE 6：

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

Answer 2

有很多方法可以做到这一点。假设您的文字遵循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>

Answer 3

如果文字位于图片顶部，则无法使用img:hover获得所需效果，因为当光标位于文本上时，它不会注册为悬停图像。您可以将图像和文本放在某个内容中，然后在父项悬停时使文本消失

＆＃13;

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

＆＃13;

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

＆＃13;

当图像悬停在图像上时，如何设置叠加在图像上的文本，不透明度为0？

3 个答案: