具有绝对位置的图像上的悬停文本答案

【问题标题】：Hovered text on image with absolute position具有绝对位置的图像上的悬停文本
【发布时间】：2023-03-22 14:56:02
【问题描述】：

在图片上您可以看到 3 张图片，我希望它们与文字一起悬停。我对所有这些 CSS 东西都很陌生。将鼠标悬停在三个图像文本中的一个上后，我的问题是我尝试了很多东西，也许错误在于绝对位置？

HTML：

<div id="imgBackground"></div>
<div id="imgContainer">
    <img src="images/coffee_01.jpg" />
    <img src="images/coffee_02.jpg" />
    <img src="images/coffee_03.jpg" />
</div>

CSS：

#imgBackground {
    position: absolute;
    width: 100%;
    height: 300px;
    background-color: rgb(244,244,244); }

#imgContainer {
    position: relative;
    margin: auto;
    width: 980px;
    padding: 30px; }

#imgContainer img {
        margin: 0px 14px 0px 14px;
        width: 295px;
        height: 254px;    }

【问题讨论】：

标签： css image text hover

【解决方案1】：

HTML：

<div id="wrapper">
    <img src="http://placehold.it/300x200" class="hover" />
    <p class="text">text</p>
</div>

CSS：

#wrapper .text {
position:relative;
bottom:30px;
left:0px;
visibility:hidden;
}

#wrapper:hover .text {
visibility:visible;
}

在这里查看演示：http://jsfiddle.net/liccyfuentes/D5UEW/

【讨论】：

【解决方案2】：

LOne 的答案是正确的，但无需您进行太多更改即可。

HTML：

<div id="imgContainer">
    <li style="background-image:url('images/coffee_01.jpg')"><p>Some random text here...<p></li>
    <li style="background-image:url('images/coffee_02.jpg')"><p>Some random text here...<p></li>
    <li style="background-image:url('images/coffee_03.jpg')"><p>Some random text here...<p></li>
</div>

CSS：

#imgContainer {
        position: relative;
        margin: auto;
        width: 980px;
        color:#FFF;
        padding: 30px;
}

#imgContainer li {
        margin: 0px 14px 0px 14px;
        width: 295px;
        height: 254px;
        list-style:none;
        background:#000;
}

#imgContainer li * {
        opacity:0; /* Visibility: hidden; works too! */
}

#imgContainer li:hover * {
        opacity:1; /* Visibility: visible; works too! */
}

Codepen：http://codepen.io/anon/pen/bzIGl

【讨论】：

【解决方案3】：

谢谢大家，但你们的回答对我没有多大帮助。

正如您在这段代码中看到的那样，我试图画一点我需要的东西，但请注意并将鼠标移动到空白区域的图像下方，它也会悬停。如何解决这个问题？

#wrapper .text {
position:relative;
bottom:221px;
left:0px;
width: 300px;
height: 200px;
background: rgba(0,0,0, .4);
text-align: center;
text-height: 50px;
visibility:hidden;
}

#wrapper:hover .text {
visibility:visible;
}

这是我的更新：

http://jsfiddle.net/D5UEW/2/

我认为这可能会导致它，有什么想法吗？

@编辑

此代码来自我的页面：

.imgContainer {
    position: relative;
    margin: auto;
    width: 295px;
    height: 254px;
    padding: 30px;
    float: left;
}

.imgWrapper .text {
    position:relative;
    bottom:274px;
    top: 10px;
    width: 295px;
    height: 254px;
    background: rgba(0,0,0, .4);
    text-align: center;
    visibility:hidden;
}

.imgWrapper:hover .text {
visibility:visible;
}

我的页面上的结果：

【讨论】：

不错的演示，你的小提琴对我帮助很大。