我的 HOVER ON IMG 有什么问题答案

【问题标题】：What's wrong with my HOVER ON IMG我的 HOVER ON IMG 有什么问题
【发布时间】：2023-03-25 12:57:01
【问题描述】：

我很绝望。尝试通过css在悬停时对图像实现简单的颜色更改，我找不到使用我认为的选择器的正确方法，但我并不完全清楚为什么它不起作用。（我让它适用于网站上的其他页面）这是我为 css 准备的内容：

/* NO ROLLOVER > IMG is GRAY */

#post-1263 > div > div > div > div > div > div:nth-child(1) > div > div.vc_grid.vc_row.vc_pageable-wrapper.vc_hook_hover.owl-carousel.vc_grid-owl-theme.owl-loaded.owl-drag > div.owl-stage-outer.owl-height > div > div.owl-item.active > div > div:nth-child(1) > div.vc_grid-item-mini.vc_clearfix > div > div.vc_gitem-zone.vc_gitem-zone-a.vc_custom_1498264424124.img_holder > div > div > div > div > figure > div > img{
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
}

/* ROLLOVER > IMG is NOT GRAY */

#post-1263 > div > div > div > div > div > div:nth-child(1) > div > div.vc_grid.vc_row.vc_pageable-wrapper.vc_hook_hover.owl-carousel.vc_grid-owl-theme.owl-loaded.owl-drag > div.owl-stage-outer.owl-height > div > div.owl-item.active > div > div:nth-child(1) > div.vc_grid-item-mini.vc_clearfix > div > div.vc_gitem-zone.vc_gitem-zone-a.vc_custom_1498264424124.img_holder > div > div > div > div > figure > div:hover img{
	filter: none;
  -webkit-filter: none;
}

我猜我调用选择器的方式有问题，但到目前为止我找不到另一种调用方式（我实际上是从网络检查器菜单中提取选择器）

页面在这里：http://lesateliersvortex.com/

有人可以帮我调试一下吗？我想我再也看不到这个了 ://

【问题讨论】：

您的整个悬停选择器是错误的。能提供html、jsfiddle吗？
@Martirosian 是什么让您认为选择器错误？
因为您的选择器中有自动生成的类名，这些名称很可能会在每次页面刷新时发生变化
您应该在选择器中将类添加到最后一个 div 并按该类添加悬停样式。尽量避免写这么长的选择器
感谢@Martirosian，但我无法向此选择器添加名称，它是按原样提供的，我无法摆弄 php。

标签： css image css-selectors hover web-inspector

【解决方案1】：

您的选择器太长（可视作曲家类已经是唯一的）并且图像上还有另一个悬停，这就是它不起作用的原因，所以添加 z-index ，它正在工作

#post-1263 > div > div > div > div > div > div:nth-child(1) > div > div.vc_grid.vc_row.vc_pageable-wrapper.vc_hook_hover.owl-carousel.vc_grid-owl-theme.owl-loaded.owl-drag > div.owl-stage-outer.owl-height > div > div.owl-item.active > div > div:nth-child(1) > div.vc_grid-item-mini.vc_clearfix > div > div.vc_gitem-zone.vc_gitem-zone-a.vc_custom_1498264424124.img_holder:hover{filter: grayscale(0%);opacity: 1;-webkit-filter: grayscale(0%);}

#post-1263 > div > div > div > div > div > div:nth-child(1) > div > div.vc_grid.vc_row.vc_pageable-wrapper.vc_hook_hover.owl-carousel.vc_grid-owl-theme.owl-loaded.owl-drag > div.owl-stage-outer.owl-height > div > div.owl-item.active > div > div:nth-child(1) > div.vc_grid-item-mini.vc_clearfix > div > div.vc_gitem-zone.vc_gitem-zone-a.vc_custom_1498264424124.img_holder{
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
filter: gray; /* IE6-9 */
z-index:9999999;
-webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
}

【讨论】：