私のHOVER ON IMGに何の問題がありますか

Question

私は絶望的です。 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; 
 
}

が、私は私のセレクタを呼ぶが、やり方が間違っている：ここでは 私はCSSの持っているものである（私は、サイト上の他のページのために働くそれを得ました）私は

ページはこちら（私は実際にウェブインスペクタ]メニューから[セレクタを抽出しています）、これまでそれを呼び出すための別の方法を見つけることができませんでした：http://lesateliersvortex.com/

月誰か時間elp私はこれをデバッグしますか？ //

Answer 1

セレクタが長すぎる（ビジュアルコンポーザークラスは既に一意です）、画像上にもう一度カーソルを置くと機能しないため、Z-インデックスを追加してください、それは働いています

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