我的HOVER ON IMG有什么问题

Question

我很绝望。 试图在通过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{ 
 
\t filter: none; 
 
    -webkit-filter: none; 
 
}

我猜的东西是错误与我打电话给我的选择，但道路我无法找到另一种方式来调用它为止（其实我很提取Web检查菜单选择）

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

五月有人^ h请帮我调试这个好吗？我认为我不能直接看到这一个了：//

Answer 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+ */ 
}