Css 鼠标悬停以更改wordpress中的图像样式

我有一个由wordpress建立的网站

在公文包列表中，客户端希望所有缩略图都是黑白的，当鼠标悬停在一个缩略图上时，图像变成彩色

html代码如下

<article class="wgl-portfolio-list_item item wgl_col-1-5 residential animate" style="padding-right: 17.5px; padding-left: 17.5px; padding-bottom: 35px; position: absolute; left: 79.9974%; top: 0px;"><div class="wgl-portfolio-item_wrapper inside_image sub_layer_animation"><div class="wgl-portfolio-item_image"><img src="http://axearchitects.com.au/wp-content/uploads/2019/06/Sevenoaks-Balwyn_Optimised_2-scaled-1170x1170.jpg" alt=""></div><div class="wgl-portfolio-item_description"><div class="wgl-portfolio-item_description-inner"><div class="wgl-portfolio-item_title"><h4 class="title"><a href="http://axearchitects.com.au/projects/sevenoaks-balwyn/">Sevenoaks, Balwyn</a></h4></div><div class="wgl-portfolio-item_meta"><span class="post_cats"><a href="http://axearchitects.com.au/projects-category/residential/" class="portfolio-category">RESIDENTIAL</a></span></div></div></div><a href="http://axearchitects.com.au/projects/sevenoaks-balwyn/" class="portfolio_link single_link"><i class="portfolio_link-icon flaticon-right-arrow"></i></a></div></article>

然后我想做悬停然后改变的步骤。我一个接一个地试了这些代码

.wgl-portfolio-item_image:hover{
filter:grayscale(0)!important;}

及

及

及

}))

（警报仅用于测试JQuery是否真的选择了正确的类并正常工作）

但他们都觉得不对劲，当然也不管用。 问题是这些图像没有ID，它们只有上面的类。如何确保我正在更改鼠标悬停的那个？以及如何更改图像样式

多谢各位

这些图像已经有了这样的功能：鼠标悬停，并显示描述。我还尝试在相同的{}中添加过滤器更改。没用。

---

该网站最初是由Wordpress Elementor创建的。不确定该信息是否有用如果我们假设您的所有图像都具有.wgl-portfolio-item_图像类，则您只需在CSS文件中（或者在样式标记中）写入以下行：

顺便说一句，正如您所说的悬停，不需要

：：选择

以下面的代码为例：

div.gallery{
边框：1px实心#ccc；
}
.myImage{
过滤器：灰度（1）；
}
.myImage:悬停{
过滤器：灰度（0）！重要；
}
部门画廊：悬停{
边框：1px实心#777；
}
美术馆副馆长{
宽度：100%；
高度：自动；
}
分区描述{
填充：15px；
文本对齐：居中；
}
* {
框大小：边框框；
}
.反应迅速{
填充：0 6px；
浮动：左；
宽度：24.99999%；
}
@仅介质屏幕和（最大宽度：700px）{
.反应迅速{
宽度：49.99999%；
利润率：6px0；
}
}
@仅介质屏幕和（最大宽度：500px）{
.反应迅速{
宽度：100%；
}
}
.clearfix:之后{
内容：“；
显示：表格；
明确：两者皆有；
}

响应式图像库
调整浏览器窗口的大小以查看效果。
在此处添加图像的描述
在此处添加图像的描述
在此处添加图像的描述
在此处添加图像的描述

我刚让它工作起来

所以有两层，我也需要激活第一层。 因此，正确的代码应该是：

.inside_image.sub_layer_animation:hover .wgl-portfolio-item_image{
filter:grayscale(0) !important;}

---

如果您想要

：悬停

效果，为什么要使用

：：selection

？我以前没有使用：：selection，但仍然不起作用。让我改变一下我的问题事实上这是我尝试的第一个代码。虽然不管用，但我现在正在尝试，效果非常好。我知道它应该管用，也不应该是个问题。我猜这和wordpress有关。这就是为什么我在这里问…我不知道你所说的“它与WordPress有关”是什么意思，但我只是编辑了我的答案，并在其中添加了一个代码片段，这是你所问问题的一个示例实现。希望它能帮助你。我尝试的第一个代码应该可以工作。我只是不明白为什么它没有改变。。。

::selection{
filter:grayscale(0)!important;}

::selection, .wgl-portfolio-item_image{
filter:grayscale(0)!important;}

jQuery(document).ready(function( $ ){
$( ".wgl-portfolio-item_image" ).hover(function(){
  alert("hello");
    $(this).css("filter", "grayscale(0)!important");
    
});

.wgl-portfolio-item_image{
filter:grayscale(1);
}

.wgl-portfolio-item_image:hover{
    filter:grayscale(0)!important;
}

.inside_image.sub_layer_animation:hover .wgl-portfolio-item_image{
filter:grayscale(0) !important;}