当鼠标悬停在另一个兄弟姐妹的元素上时，CSS div会消失

Question

我有一个使用Dune theme from Zigzagpress的Wordpress网站。

您可以查看网站here。

我想要做的是，当鼠标悬停在图片上时，移除post_image_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检查器和custom.css文件后，我可以在.post_image_overlay中看到我的自定义css规则（例如，如果我将不透明度更改为0.5，则背景不是虽然很黑暗，但我无法在任何地方看到.post_image_overlay:hover。我甚至试图直接在Chrome检查器中添加它，但它变得灰暗：

我发布了一个JSFiddle但是我认为问题出现在页面中与我的自定义文件冲突的其他CSS下面，所以我想最好现场检查一下。

奖励积分：理想情况下，我希望只有当用户徘徊在条目标题（h2.entry-title）上时才会让背景淡出，而不是所有图像，但我不喜欢我真的知道是否可以做到。

Answer 1

它无法正常工作的原因是因为.entry-content-title具有z-index: 1002;样式，这意味着它位于.post_image_overlay的顶部，因此您和＆＃1}} ＃39;不要徘徊在它上面。