Question

我已经看过这里（How to show text on image when hovering?）找到这个问题的解决方案，但它没有100％工作......因为段落位于图像下方，当你将鼠标悬停在图像上时它。当您将鼠标悬停在图像上时，我希望文本覆盖整个图像。（请看：http://jsfiddle.net/rMhGE/或以下。）

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>

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

感谢任何帮助。谢谢。

Answer 1

更改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
}

Answer 2

移除接触高度。以及保证金。如果使用绝对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;
}

Answer 3

图片上面有文字，我不知道你在这里要做什么。 “覆盖图像”是什么意思？

Answer 4

您需要将“p”元素的边距设置为0，将“height”设置为400：

margin:0;
height:400px;

更新了jsFiddle：http://jsfiddle.net/rMhGE/5/

Answer 5

Demo

从.contact中删除高度并应用top: -15px; bottom: -15px;

或者，最好的方法是设置margin: 0;删除高度。

将鼠标悬停在图像链接上时显示文本

5 个答案: