将父类的悬浮式CSS隐含到其子标记悬浮式CSS

Question

In my scenario, i want to call css of parent class's child tag hovering css on hovering of parent css.

here is my JSFiddle

I want to call the css of .videos-holder figure figcaption:hover on hover of .videos-holder figure:hover

Is it possible to do this without adding new IDs and Classes? Btw, my main purpose is to change color of <figcaptio> on hovering on <figure> .

Answer 1

.videos-holder figure  figcaption:hover{
    -webkit-filter: grayscale(0%); 
    filter: grayscale(0%);
     -webkit-transition: .2s; /* Safari */
    transition: .2s;
}

Replace to

.videos-holder figure:hover  figcaption{
    -webkit-filter: grayscale(0%); 
    filter: grayscale(0%);
     -webkit-transition: .2s; /* Safari */
    transition: .2s;
}