Html 在悬停图像上显示div

我知道有很多这样的问题，但我一直在寻找，没有找到任何对我有帮助的，所以我问了一些新问题

嗯，我想当我在图像上悬停时，将不透明度降低到0.2（这是有效的），并显示链接图标（这不起作用，我尝试了我发现的一切，我知道的一切，但什么都没有）

当我将鼠标悬停在#articles.box.box图像上时，我想显示#articles.box.box图像。悬停

谢谢

试试这个：

#articles .box .box-image:hover .hover {
  display: block;
}

---

而不是使用选择器来查找悬停图像的相邻部分

#articles .box .box-image img:hover + #articles .box .box-image .hover

您可以使用.box imagediv的悬停伪选择器，如下所示

#articles .box .box-image:hover .hover

检查以下工作代码段，它有以下2个修复

• 为了使用绝对位置正确定位元素，请使用相对div（父级）。在您的代码中，我修改了。将父对象悬停为相对
• 我已经设计了z索引，使绝对div位于图像上方

/*------------------------------*/
/*#文章SEKCIJA*/
/*------------------------------*/
@导入url(https://fonts.googleapis.com/icon?family=Material+图标）；
#文章如{
边缘顶部：50px；
}
#文章{
宽度：225px；
高度：自动；
填充：0；
保证金：0；
}
#物品箱{
高度：自动；
}
#文章。盒子。盒子图片{
背景色：#00e4ff；
高度：250px；
位置：相对位置；
}
#文章。框。框图像。悬停{
位置：绝对位置；
线高：250px；
左：45%；
显示：无；
}
#文章。盒子。盒子信息{
边缘顶部：20px；
}
#文章.方框.方框信息.标题p{
字体大小：400；
}
#文章.方框.方框信息.日期p{
字体大小：400；
字体大小：12px；
浮动：左；
}
#文章。框。框信息。查看更多{
浮动：对；
}
#文章。框。框信息。查看更多i:hover{
颜色：#006975；
}
#文章.框.框图像img:悬停{
不透明度：0.5；
}
#文章.框.框图像：悬停.悬停{
显示：块；
z指数：10；
}

这是一个非常好的例子

二十二,。朱莉

因为在本例中，您将鼠标悬停在.hover元素上，而失去了对.box图像的关注。因此，您必须对.hover:hover（#articles.box.box image.hover:hover~img{opacity:0.5；}）执行相同的操作。见希尔

#articles .box .box-image:hover .hover