当鼠标悬停在另一个元素上（该元素是同级元素的子元素）时，CSS div会褪色

我有一个Wordpress网站，它使用

你可以查看这个网站

我想做的是，当鼠标悬停在图像上时，删除

post\u image\u overlay

div所具有的灰色层

我尝试将此自定义css添加到主题中提供的文件中，以便执行此操作，

custom.css

，该文件与主题的css一起加载：

.post_image_overlay {
  opacity: 1;
  transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -webkit-transition: opacity 1s ease-in-out;
}

.post_image_overlay:hover {
  opacity: 0;
  transition: opacity .55s ease-in-out;
  -moz-transition: opacity .55s ease-in-out;
  -webkit-transition: opacity .55s ease-in-out;
}

但这似乎没有什么区别。事实上，在Chrome inspector和custom.css文件正确加载的情况下，我可以在

.post\u image\u overlay

中看到我的自定义css规则（例如，如果我将不透明度更改为

0.5

，背景就没有那么暗），但我看不到

。post\u image\u overlay:hover

任何地方。我甚至尝试将其直接添加到Chrome inspector中，但它会变灰：

我会发布一个JSFIDLE，但我相信问题在于页面中的其他CSS与我的自定义CSS冲突，所以我想最好是实时检查它

---

奖励积分：理想情况下，我希望只有当用户悬停在条目标题（

h2.entry title

）上时背景才会淡出，而不是所有的图像，但我真的不知道是否可以这样做。

它不起作用的原因是因为您的

。条目内容标题

有一个

z-index:1002样式，这意味着它位于您的
顶部。post\u image\u overlay
因此您没有在其上方悬停。
您是否尝试添加
！重要信息
？Chrome inspector将灰显当前未使用的规则。如果将鼠标悬停在元素上，您应该会看到规则被激活。您还可以通过右键单击源代码视图中的元素（位于inspector规则旁边）并单击
：hover
，来强制该元素处于状态。在Chrome inspector中选择
：hover
，可以实现此目的，但将鼠标悬停在元素本身上则不行。所以我还在想其他CSS会推翻它。看看你的网站，custom.CSS是空的，而你的
.post\u image\u overlay
没有悬停样式？杰米，我删除了它，因为它不工作。我现在又上传了一次。那么，当我将鼠标悬停在
.entry content title
元素上时，有没有办法使
.post\u image\u overlay
淡出？@Samer目前的状态，没有JavaScript，没有。如果你将它们交换，并将条目内容标题放在前一个兄弟元素之前，您可以通过这样做。条目内容标题：hover+.sibling>.post\u image\u overlay