Question

所以我有一种情况，我希望文字显示在图像上使用可见性：隐藏/可见，还有不透明度。我出于某种原因无法做到这一点。请注意，这是在列表中，因为我有其他图像显示在同一列表中，但在这里我只显示一个。下面是html：

<ul>
 <li>
   <a class="pic" href="#">
    <img alt="" src="/servlet/servlet.FileDownload?file=00PU00000096kH2MAI" style="width: 300px; height: 160px;" />
   </a>
   <div class="hovertext"> my hover text</div> 
 </li>
</ul>

并且css在这里：

#gallery ul{
margin:0;
padding:0;
list-style:none;
}

#gallery li{
display:block;
float:left;
width:310px;
height:170px;
margin:0 15px 15px 0;
}

#gallery li a{
display:block;
float:left;
width:300px;
height:160px;
margin:0;
padding:4px;

}


#gallery li a:hover {
color:#FFFFFF;
    opacity:0.6; 
background-color:#666666;
}

#gallery li a:hover .hovertext{
visibility:visible;
  }

.hovertext{ width:300px; height:85px; 
background-color:#666666;
opacity:0;
visibility:hidden;
display:block;
text-align:justify; 
color:#000000; font-size:20px; 
}

所有这一切都让我看到图像是不透明的，我可以看到div在背景中，但我无法将它向前显示在不透明文本的前面。任何帮助将不胜感激。

Answer 1

查看以下代码。

 #gallery li a:hover .hovertext{
 visibility:visible;
 }

当您悬停链接时，上面的代码将会显示hovertext的子元素。在你的情况下，它是兄弟元素。所以像下面一样更新你的CSS。

 #gallery li a:hover + .hovertext{
 visibility:visible;
 }

您还为hovertext类添加了opacity:0。我认为没有必要。因为您已经为同一个班级visibility:hidden了。所以像下面一样更新你的CSS。

 .hovertext{ width:300px; height:85px; 
  background-color:#666666;
  visibility:hidden;
  display:block;
  text-align:justify; 
  color:#000000; font-size:20px; 
  }

DEMO

DIV容器未显示在Anchor图像前面

1 个答案: