Quel est le problème avec mon HOVER ON IMG

Question

Je suis désespéré. En essayant d'implémenter un simple changement de couleur sur une image sur hover via css, je n'arrive pas à trouver la bonne façon d'utiliser mes sélecteurs, mais je ne vois pas pourquoi cela ne fonctionne pas. (Je l'ai eu à travailler pour d'autres pages sur le site) Voici ce que j'ai pour le 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; 
 
}

Je devine que quelque chose ne va pas avec la façon dont j'appelle mon sélecteur mais Je ne pouvais pas trouver une autre façon de l'appeler jusqu'à présent (j'extrais en fait le sélecteur dans le menu Web Inspector)

la page

est ici: http://lesateliersvortex.com/

quelqu'un mai h elp moi debug this s'il vous plaît? Je pense que je ne peux plus le voir directement: //

Answer 1

Vos sélecteurs sont trop longs (les classes de compositeurs visuels sont déjà uniques) et il y a un autre pointeur sur l'image qui ne fonctionne pas alors ajoutez z-index , ça marche

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