css - 需要有关将鼠标悬停在图像链接上时在 div 中显示文本的帮助。

Question

为了绘制图片图像，我有两个 div，一个在顶部可以容纳 5 个缩略图，底部 div 有 5 行文本。这个想法是，当我将鼠标悬停在图片 div 上时，我希望它的元素名称显示在底部的 div 上。我希望所有 5 张图片都发生这种情况。到处搜索，发现一些接近但死胡同的东西。非常感谢任何帮助，因为我正在努力帮助学生完成他们的元素。我对 CSS 很在行，但我无法全神贯注地完成这项任务。

Answer 1

Simple Demo

HTML 非常简单。 .photowrapper 是可选的，类可以放在 a 上。

<div class="photowrapper">
  <a href="#">
    <img src="//placehold.it/200" alt="" />
    <div class="label">Text</div>
  </a>
</div>

我们需要一切都成为一个内联 block ，以像图像一样工作。

.photowrapper {
  border: 1px solid black;
  display: inline-block;
}
.photowrapper a {
  display: inline-block;
}

我们默认我们的标签是透明的。当我们的 .photowrapper 悬停时，它的文本颜色会改变。

.photowrapper .label {
  color: transparent;
}

.photowrapper:hover .label {
  color: black;
}

如果您想要下划线，请为 .photowrapper:hover a 添加另一条规则，将装饰设置为 underline。这会在悬停时和默认情况下禁用它。

.photowrapper a {
  text-decoration: none;
}

---

Absolute Positioning Demo

使用相同的 HTML，我们可以定位标签，使它们位于同一位置。

.photowrapper .label {
  opacity: 0;
  color: black; background: yellow;
  -moz-transition: opacity 1s ease;
  -webkit-transition: opacity 1s ease;
  transition: opacity 1s ease;
  position: absolute;
  top: 100%;
  left: 0;
}

---

花哨

您可以让受支持的浏览器更改过渡颜色以获得不那么不稳定的结果。将标签样式替换为:

.photowrapper .label {
  min-height: 1em;
  color: transparent;
  -moz-transition: color 1s ease;
  -webkit-transition: color 1s ease;
  transition: color 1s ease;
}

demo

---

如果您的标签不仅仅是文本，您可以改为更改/动画不透明度。

.photowrapper .label {
  opacity: 0;
  color: black; background: yellow;
  -moz-transition: opacity 1s ease;
  -webkit-transition: opacity 1s ease;
  transition: opacity 1s ease;
}

.photowrapper:hover .label {
  opacity: 1;
}

demo