html - DIV 容器未显示在 anchor 图像前面

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 的子元素。在您的情况下，它是 siblings 元素。所以像下面这样更新你的 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