JQUERY照片弹出文本

Question

寻找一些方向/建议......

我在网站上有会员照片，我希望在图片的底部有关于会员的文字信息弹出 - 比如年龄，位置等。

它需要覆盖照片但具有不透明度，因此不会阻挡图像。

关于如何追求这个的任何建议？

欢呼声

Answer 1

您不需要任何JavaScript来执行此操作。您可以使用CSS：悬停状态显示鼠标悬停图像的信息。 假设您有这样的标记：

<div class="image">
  <img src="" />
  <div class="overlay">
    Name: John
  </div>
</div>

然后你可以这样写一个css：

.image{position:relative;}
  .overlay{position:absolute; bottom:0; display:none;}
  .overlay:hover{display:block;}

然后在所有浏览器中使用不透明度最好不要使用css不透明度，因为它在旧浏览器中不受支持。我会使用alpha小于1的单个像素png。