将鼠标悬停在图像链接上时显示文本
[英]Showing Text When Hovering Over an Image Link
问题描述
I have already looked here ( How to show text on image when hovering? ) to find a solution to this problem but it doesnt 100% work... Because the paragraph is located below the image part of the image is not covered when you hover over it. 
我已经看过这里（ 如何在悬停时在图像上显示文本？ ）以找到此问题的解决方案，但是它不能100％起作用...因为该段位于悬停时未覆盖图像的图像部分超过它。 I want the whole image covered by the text when you hover over the image. 当您将鼠标悬停在图像上时，我希望整个图像都被文字覆盖。 (Look at this: http://jsfiddle.net/rMhGE/ or below.) （查看此网址 ： http ： //jsfiddle.net/rMhGE/或更低版本。）
The HTML HTML
<body>
<div class="cube1">
<a href="http://google.com"><img src="http://us.123rf.com/400wm/400/400/busja/busja1209/busja120900010/15099001-detailed-vector-image-of-symbol-of-london--best-known-british-double-decker-bus.jpg">
<p class="contact">Random Text Here</p></a>
</div>
</body>
The CSS CSS
.cube1 {
position: relative;
width: 400px;
height: 400px;
float: left;
}
.contact {
overflow: hidden;
position: absolute;
width: 400px;
height: 386px;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(255,255,255,0.95);
color: #aaa;
visibility: hidden;
opacity: 0;
}
.cube1:hover .contact {
visibility: visible;
opacity: 1;
}
Any help is appreciated. 任何帮助表示赞赏。 Thank you. 谢谢。
5 个解决方案
解决方案1
3 2013-08-25 03:35:01
change the p {margin:0px} of the p element or give the class 更改p元素的p {margin:0px}或指定类
.contact {
overflow: hidden;
position: absolute;
width: 400px;
height: 395px;//change height also to cover it completly
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(255,255,255,0.95);
color: #aaa;
visibility: hidden;
opacity: 0;
margin:0px
}
解决方案2
3 已采纳 2013-08-25 03:39:01
Remove the height from contact. 移开触点的高度。 as well as the margin. 以及保证金。 You also don't need the width value if you're stretching it with the absolute 0 0 0 0 method. 如果使用绝对0 0 0 0方法拉伸宽度值，则也不需要宽度值。
.contact {
overflow: hidden;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(255,255,255,0.95);
color: #aaa;
visibility: hidden;
opacity: 0;
margin: 0;
}
解决方案3
0 2013-08-25 03:34:38
The image has the text over it, I am not sure what you are trying to do here. 图像上面有文字，我不确定您要在这里做什么。 What do you mean by "covering the image"? “覆盖图像”是什么意思？
解决方案4
0 2013-08-25 03:37:35
You need to set margin on the "p" element to 0 and the "height" to 400: 您需要将“ p”元素的边距设置为0，将“高度”设置为400：
margin:0;
height:400px;
Updated jsFiddle: http://jsfiddle.net/rMhGE/5/ 更新了jsFiddle： http : //jsfiddle.net/rMhGE/5/
解决方案5
0 2013-08-25 03:46:14
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.