【发布时间】：2016-03-28 22:23:12
【问题描述】：
我有一个使用 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 与我的自定义 CSS 冲突，所以我想最好现场检查。
奖励积分：理想情况下，我希望只有当用户将鼠标悬停在条目标题 (h2.entry-title) 上时背景才会消失，而不是所有图像，但我不会真的知道这是否可以做到。
【问题讨论】：
-
您是否尝试添加
!important？ -
Chrome 检查器将当前未使用的规则灰显。如果将鼠标悬停在元素上，您应该会看到规则已激活。您还可以通过右键单击源视图中的元素（检查器规则旁边）并单击
:hover来强制元素状态。 -
在 Chrome 检查器中选择
:hover可以解决问题，但将鼠标悬停在元素本身上则不行。所以我仍在考虑其他一些 CSS 否决它。 -
查看你的站点，custom.css 是空的，你的
.post_image_overlay没有悬停样式？ -
Jamie，我删除了它，因为它不起作用。我现在又上传了。
标签： css css-transitions