0

要绘制图片图像，我在顶部有两个 div，一个用于保存 5 张缩略图，底部 div 有 5 行文本。这个想法是当我将鼠标悬停在图片 div 上时，我希望它的项目名称显示在底部 div 上。我希望这发生在所有 5 张图片上。到处搜索，发现一些很接近但死路一条的东西。非常感谢任何帮助，因为我正在尝试帮助学生完成他们的项目。我对 CSS 很好，我只是无法完成这项任务。

4

3 回答 3

3

简单演示

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

绝对定位演示

使用相同的 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;
}

演示

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

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

演示

于 2013-08-08T01:38:10.700 回答
1

这样做是使用 data 属性附加名称，然后当图像悬停时，data 属性中的任何内容都设置为带有 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('');
    });
});
于 2013-08-08T01:44:03.680 回答
0

您将需要使用 javascript 或 jquery 让它出现在悬停时。有人在这里问了一些非常相似的问题：

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

还有很多教程可以通过简单的谷歌搜索访问，以创建 jquery 脚本来执行您的要求。让我知道您是否需要更多帮助或不知道该怎么做。

于 2013-08-08T01:35:05.893 回答