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