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

Posted 2023-05-08

技术标签:

【中文标题】将鼠标悬停在图像链接上时显示文本【英文标题】：Showing Text When Hovering Over an Image Link 【发布时间】：2013-08-27 20:04:16 【问题描述】：

我已经看过这里 (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;

感谢任何帮助。谢谢。

【问题讨论】：

已提供答案。但也许你应该摆脱可见性和不透明度，只使用显示。 【参考方案1】：

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

【讨论】：

为什么我收到 -1？【参考方案2】：

改变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

【讨论】：

.contact margin-top:0px; 【参考方案3】：

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

【讨论】：

【参考方案4】：

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