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

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

html css

Html 将鼠标悬停在图像链接上时显示文本,html,css,Html,Css,我已经在这里（）找到了这个问题的解决方案，但它不是100%有效。。。因为段落位于图像下方，所以当您将鼠标悬停在段落上方时，图像的部分不会被覆盖。我希望当您将鼠标悬停在图像上时，文本覆盖整个图像。（看看这个：或下面。） HTML <body> <div class="cube1"> <a href="http://google.com"><img src="http://us.123rf.com/400wm/40

我已经在这里（）找到了这个问题的解决方案，但它不是100%有效。。。因为段落位于图像下方，所以当您将鼠标悬停在段落上方时，图像的部分不会被覆盖。我希望当您将鼠标悬停在图像上时，文本覆盖整个图像。（看看这个：或下面。）

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>

感谢您的帮助。谢谢。

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

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

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

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

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

更新的JSFIDLE:

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

更新的JSFIDLE:

删除联系人的高度。以及利润。如果使用绝对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;
}

从触点上拆下高度传感器。以及利润。如果使用绝对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;
}

移除高度。接触并应用

top:-15px；底部：-15px
或者，最好的方法是设置margin:0移除高度。

移除高度。接触并应用top:-15px；底部：-15px
或者，最好的方法是设置margin:0移除高度。
.contact{margin top:0px；}.contact{margin top:0px；}，p
元素的高度应该是400px
，以匹配图像。我意识到绝对位置加上top/bot/left/right的0已经完美地设置了高度/宽度，所以你可以直接去掉那些。而且p
元素的高度应该是400px
，以匹配图像。我意识到绝对位置加上0表示顶部/机器人/左/右已经完美地设置了高度/宽度，所以你可以直接去掉这些。为什么我会得到-1？为什么我会得到-1？答案已经提供了。但您可能应该去掉可见性和不透明度，只使用已经提供的display.answers。但可能您应该去掉可见性和不透明度，只使用显示。