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>

我们需要一切都像一个内联块，就像一个图像。

.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;
}

Fancyness

您可以让支持的浏览器转换颜色更改，以获得不太生涩的结果。用以下代码替换标签样式：

.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

Answer 2

这样做是使用数据属性附加名称，然后当图像悬停时，数据属性中的任何内容都被设置为带有id“info”的p标记的HTML

行动中：http://jsfiddle.net/calder12/HQQsb/

HTML

<div>
    <img src="http://placehold.it/100x100" data-name="Image 1" class="project"/>
    <img src="http://placehold.it/100x100" data-name="Image 2" class="project"/>
    <img src="http://placehold.it/100x100" data-name="Image 3" class="project"/>
</div>
<div id="infodiv"><p id="info"></p></div>

的jQuery

$(document).ready(function(){
    $(".project").mouseover(function(){
        $("#info").html($(this).data('name'));
    }).mouseout(function(){
        $("#info").html('');
    });
});

Answer 3

您需要使用javascript或jquery才能在悬停时显示它。有人在这里问了一些相似的东西：

http://stackoverflow.com/questions/1119956/hover-element-a-show-hide-element-b

此外，还有许多教程可以通过简单的谷歌搜索访问，创建一个jquery脚本来执行您所要求的操作。如果您需要帮助或者不了解该怎么做，请告诉我。

在图像链接悬停时，需要有关在div中显示文本的帮助。

3 个答案:

Simple Demo

Absolute Positioning Demo

Fancyness