Javascript 图像悬停上的CSS文本无效

我试图在你悬停在图像上时得到一个照片描述。这听起来是一项容易的任务，但我无法让它工作。我尝试过几种不同的方法，但都没有效果，弹出窗口到处都是，或者把我的div搞乱了

这是我的HTML：

<div id="box">
    <div class="mainimg">
        <a href="url" target="_blank">
            <img src="'thumbnail">
        </a>
        <span class="text">
            <p>'item.comment'</p>
        </span>
    </div>
    <div class="pfooter">
        <img src="avatar">
        <a href="userhome" target="_"blank">username</a>
    </div>
</div>

---

其中一个

.mainimg

选择器上缺少一个点

以下是您想要的：

看起来你做得很好，只需要调整文本框的位置。添加

位置：相对

到

#box

是一个良好的开端。我也拐弯了

有关更多调整，请参见上面的我的链接。

有三个问题

是因为在

mainimg:hover

#box .mainimg:hover span.text {
   opacity: 1;
}

您需要在

#框中的
顶部和
左侧添加一些值。mainimgspan.text

#box .mainimg span.text {
background: rgba(0, 0, 0, 0.5);
color: white;
cursor: pointer;
display: table;
height: 150px;
left: 34px;
position: absolute;
top: 12px;
width: 150px;
opacity: 0;
-webkit-transition: opacity 500ms;
-moz-transition: opacity 500ms;
-o-transition: opacity 500ms;
transition: opacity 500ms;
}

您的某些HTML不正确

应该是

---

我修复了这三个问题

在维护之前您缺少一个点，这里#box mainimg:hover span.text正如Juan C所说，在

mainimg:hover

之前您缺少

。在目标中的

空白
之前还有
“
。
也不应该放在span中。但是，悬停对所有图像都很有帮助（这是一个图像数组）显示在屏幕的左上角。非常远。我玩了一些位置标签，但仍然没有运气。另外，如果悬停时的边缘像图中一样变圆会很好。这可能吗？@BrandN00b我做了所有这些（固定位置和圆角）在我昨天的回答中的演示中，我复制了你的示例。它在chrome和firefox中出现了吗。还有什么能让悬停显示在左上角的吗？我尝试了你的示例，它看起来很棒。除了和下面的人一样的问题。我的悬停都显示在页面的左上角。我创建了几行图像，所有这些悬停都出现了在文档顶部。我已经使用了“位置：”设置，但没有效果。@BrandN00b您需要设置父对象的位置（#框）将.text设置为
relative
，将.text设置为
absolute
。如果不将父对象设置为relative，则绝对位置是相对于文档的，而不是相对于父容器的，并将显示在文档的左上角。@BrandN00b查看“我的更新”以查看它如何处理页面上的多个图像。是的！我缺少“位置：relative”e、 “在盒子里。唯一剩下的问题是悬停没有完全对齐，有点不对劲。加上一些评论太长了，以至于盒子很长。但我想我可以处理一下。再次感谢
#box .mainimg:hover span.text {
   opacity: 1;
}

#box .mainimg span.text {
background: rgba(0, 0, 0, 0.5);
color: white;
cursor: pointer;
display: table;
height: 150px;
left: 34px;
position: absolute;
top: 12px;
width: 150px;
opacity: 0;
-webkit-transition: opacity 500ms;
-moz-transition: opacity 500ms;
-o-transition: opacity 500ms;
transition: opacity 500ms;
}