0

我已经看过这里（如何在悬停时在图像上显示文本？）以找到解决此问题的方法，但它不能 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;
}

任何帮助表示赞赏。谢谢你。

4

5 回答 5

3

从接触中移除高度。以及保证金。如果您使用绝对 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;
}
于 2013-08-25T03:39:01.107 回答
3

更改p {margin:0px}p 元素的

.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
}
于 2013-08-25T03:35:01.610 回答
0

演示

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

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

于 2013-08-25T03:46:14.677 回答
0

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

于 2013-08-25T03:34:38.733 回答
0

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

margin:0;
height:400px;

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

于 2013-08-25T03:37:35.100 回答