悬停时如何在图像上显示文字？

Question

将鼠标悬停在图像上时，我试图显示描述。我已经以不太理想的方式完成了它，在此处使用图像精灵和悬停：我希望它看起来完全像我拥有的那样，但使用真实文本而不是图像。

我尝试了一些不同的事情，但我似乎无法弄清楚该怎么做。我正在尝试仅使用 HTML 和 CSS 来完成此操作，但我不确定这是否可行。

随意浏览我的代码，我会在这里粘贴我认为相关的内容。

HTML

 div#projectlist {
  width: 770px;
  margin: 0 auto;
  margin-top: 20px;
  margin-bottom: 40px;
}

div#buzzbutton {
  display: block;
  float: left;
  margin: 2px;
  background: url(content/assets/thumbnails/design/buzz_sprite.jpg) 0 0px no-repeat;
  width: 150px;
  height: 150px;
}

div#buzzbutton:hover {
  background: url(content/assets/thumbnails/design/buzz_sprite.jpg);
  width: 150px;
  height: 150px;
  background-position: 0 -150px;
}

div#slinksterbutton {
  display: block;
  float: left;
  background: url(content/assets/thumbnails/design/slinkster_sprite.jpg) 0 0px no-repeat;
  width: 150px;
  height: 150px;
  margin: 2px;
}

div#slinksterbutton:hover {
  background: url(content/assets/thumbnails/design/slinkster_sprite.jpg);
  width: 150px;
  height: 150px;
  background-position: 0 -150px;
}

 <div id="projectlist">
  <div id="buzzbutton">
    <a href="buzz.html" title=""><img src="content/assets/thumbnails/transparent_150x150.png" alt="" /></a>
  </div>

  <div id="slinksterbutton">
    <a href="slinkster.html" title=""><img src="content/assets/thumbnails/transparent_150x150.png" alt="" /></a>
  </div>
</div>

原文由 Will Ryan 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

这很简单。将图像和“悬停时出现”描述包装在与图像尺寸相同的 div 中。然后，使用一些 CSS，命令在悬停该 div 时显示说明。

 /* quick reset */
* {
  margin: 0;
  padding: 0;
  border: 0;
}

/* relevant styles */
.img__wrap {
  position: relative;
  height: 200px;
  width: 257px;
}

.img__description {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(29, 106, 154, 0.72);
  color: #fff;
  visibility: hidden;
  opacity: 0;

  /* transition effect. not necessary */
  transition: opacity .2s, visibility .2s;
}

.img__wrap:hover .img__description {
  visibility: visible;
  opacity: 1;
}

 <div class="img__wrap">
  <img class="img__img" src="http://placehold.it/257x200.jpg" />
  <p class="img__description">This image looks super neat.</p>
</div>

一个不错的小提琴： https ://jsfiddle.net/govdqd8y/

编辑：

如果您不想在包装上显式设置 <img> 的高度，还有另一个选项 <div> ，这只是设置 <div> ’s display—内联块。 （不过请记住，如果图片加载失败，效果会很差。）

如果您选择此选项，您会注意到 <img> 和包装底部 --- <div> --- 之间会有一个小间距。这是因为 <img> 的默认值 vertical-align 的值 baseline 。如果将其设置为 bottom 它将消失。

这是使用此选项的小提琴： https ://jsfiddle.net/joplomacedo/5cL31o0g/

原文由 João Paulo Macedo 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

在您的 HTML 中，尝试将您想要出现的文本放在代码的标题部分：

 <a  href="buzz.html" title="buzz hover text">

您也可以对图像的替代文本执行相同的操作。

原文由 mrpopo 发布，翻译遵循 CC BY-SA 3.0 许可协议