在 Wordpress 投资组合列表中悬停时更改图像答案

【问题标题】：Change image on hover in Wordpress portfolio list在 Wordpress 投资组合列表中悬停时更改图像
【发布时间】：2019-02-13 02:17:20
【问题描述】：

我在我的网站上使用 wordpress，主页上设置了一个可视化作曲家的“作品集列表”小部件。

我有一组图像（链接），点击后会跳转到项目页面。

主页上的精选图片是在作品集的项目页面上设置的“精选图片”。有没有机会在主页上将这些图像设为黑白，然后在悬停时着色？因此，当您访问页面时它们是黑白的，然后在您将鼠标悬停在它们上时会着色！

链接是：http://svenharambasic.com

谢谢

【问题讨论】：

标签： css wordpress image hover portfolio

【解决方案1】：

CSS 有您可以使用的Filter Effects。请注意，它们与旧版浏览器并不完全兼容。但是图像上的filter: grayscale(100%) 和悬停上的filter: grayscale(0%) 会给你一个简单的效果，就像你描述的那样：

.projects_holder img {
  filter: grayscale(100%);
  transition: .25s all ease-out;
}

.projects_holder img:hover {
  filter: grayscale(0%);
}

<div class="projects_holder">
  <img src="https://placekitten.com/200/300" />
  <img src="https://placekitten.com/220/280" />
  <img src="https://placekitten.com/300/250" />
</div>

如果您愿意，有一些方法可以获得更好的浏览器支持：https://gist.github.com/karlhorky/3478370

【讨论】：

感谢您的快速回答；你能告诉我应该把这段代码放在哪里吗？在附加的CSS？我是否必须分别为每个图像添加它？如果是这样的话，你能给我一个关于一些主页图片的例子吗？
你完全可以把它放在 Additional CSS 部分。您可能会关心给当前的CSS Spec 一次以了解它是如何工作的。我给你的代码将适用于类projects_holder 的div 内的所有图像。它实际上应该是即插即用的 - 但您可能需要将 img 更改为 article。
太棒了...好吧，所以我添加了第一个代码，它使所有内容变为灰度，这就是我想要的，但是，一旦我将鼠标悬停在它上面，它就不会着色。第二个代码究竟做了什么？我应该用什么替换小猫链接？
好的，所以我发现，有一个问题，因为小部件的选项覆盖了 css... 有一个选项“悬停动画”，没有“无”，只是默认（添加彩色带有文本的框）和其他各种（缩放，拆分等......，总是选择“颜色”）......你的css（灰度：0％）是否有机会获得最高优先级？
您是否将img 的两个实例都替换为article？这就是我如何让它与 DevTools 打开一起工作。否则你可以尝试添加!important。