要绘制图片图像,我有两个div,一个在顶部,可容纳5个缩略图,而底部div有5行文本。我的想法是当我将鼠标悬停在图片div上时,我希望它的项目名称显示在底部div上。我希望所有5张照片都能发生这种情况。一直到处搜寻,发现一些接近但死路一条的东西。我非常感谢任何帮助,因为我正在努力帮助学生完成他们的项目。我很擅长CSS我只是无法绕过这个任务。
答案 0 :(得分: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;
}
答案 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脚本来执行您所要求的操作。如果您需要帮助或者不了解该怎么做,请告诉我。