在Wordpress投资组合列表中悬停时更改图像
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了在Wordpress投资组合列表中悬停时更改图像相关的知识，希望对你有一定的参考价值。
我在我的网站上使用wordpress，并在主页上设置了视觉作曲家的“投资组合列表”小部件。
我有一个图像（链接）的砖石，点击导致项目的页面。
主页上的图片是投资组合项目页面上设置的“特色图片”。是否有机会在主页上将此图像设为黑白图像，然后在悬停时着色？所以当你访问页面时它们是黑白的，然后一旦你将它们悬停在它们上面就会变色！
谢谢
答案
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>以上是关于在Wordpress投资组合列表中悬停时更改图像的主要内容，如果未能解决你的问题，请参考以下文章