Css 输入图像：悬停文本和不透明度

如何使悬停选项允许我看到不透明度的图像和内部的p标记不受不透明度样式的影响？请注意，img在一个输入标签中，当我点击它时，一个bootsrap模式将与输入表单一起出现

.img\u wrap:悬停
#updateMg{opacity:0.7；}

单击此处更改您的图像

您需要分别处理每个孩子的不透明度。此外，如果希望它们重叠，则需要其中一个（我的示例中的文本定位为

绝对

和父

相对

）

我猜下面的例子是你想要实现的？如果没有，请更清楚地说明您的要求

.img\u wrap{
位置：相对位置；
显示：内联块；
}
.img_wrap输入[type=“image”]{
不透明度：1；
显示：块；
过渡：不透明度.3s立方贝塞尔（.4,0,2,1）
}
.img_wrap：悬停输入[type=“image”]{
不透明度：.3；
}
.img_wrap.imgText{
位置：绝对位置；
身高：100%；
宽度：100%；
左：0；
排名：0；
显示器：flex；
证明内容：中心；
对齐项目：居中；
文本对齐：居中；
不透明度：0；
过渡：不透明度.3s立方贝塞尔（.4,0,2,1）
}
.img_wrap:hover.imgText{
不透明度：1；
指针事件：无；
}

单击此处更改您的图像

这是您想要的

.img_wrap{
    display: inline-block;
    position: relative;
}
.img_wrap:hover #updateImg{
    opacity: 0.7;
    position: relative;
}
.img_wrap:hover .imgText{
    position:absolute;
    top:0;
    bottom: 0;
    left: 0;
    right:0;
}

---

是否希望图像显示在悬停状态？不，图像必须保持在不透明度的背景上，并且在顶部必须显示文本“单击此处更改图像”这是您想要的。img_wrap:hover#updateImg{opacity:0.7；}是的，但同时我需要图像上的文本。文本是否只在图像悬停时出现？@Janus:）是的，我是指输入。（事实上，我把它正确地写了3个字）。谢谢你发现它。谢谢，但是现在输入不起作用了。引导模式没有apper@PaoloPorcellato几分钟前意识到了这一点，并在您发表评论之前更新了我的代码。您需要使用

指针事件：无让
指针事件通过
.imgText
查看更新的答案。或者，您可以将
.imgText
放在标记中的
之前，而
将是捕捉点击的对象，是DOM中的最后一个（在前面的同级上绘制）。