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

时间:2013-08-08 01:25:19

标签: css html

要绘制图片图像,我有两个div,一个在顶部,可容纳5个缩略图,而底部div有5行文本。我的想法是当我将鼠标悬停在图片div上时,我希望它的项目名称显示在底部div上。我希望所有5张照片都能发生这种情况。一直到处搜寻,发现一些接近但死路一条的东西。我非常感谢任何帮助,因为我正在努力帮助学生完成他们的项目。我很擅长CSS我只是无法绕过这个任务。

3 个答案:

答案 0 :(得分:3)

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

答案 1 :(得分:1)

这样做是使用数据属性附加名称,然后当图像悬停时,数据属性中的任何内容都被设置为带有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('');
    });
});

答案 2 :(得分:0)

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

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

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