html - 将父类 hover css 实现到它的子标签 hover css

Question

在我的场景中，我想调用父类的子标签的 css hovering css on hovering of parent css。

这是我的 JSFiddle

我想调用.videos-holder figure figcaption:hover的css悬停在 .videos-holder figure:hover 上

是否可以在不添加新 ID 和类的情况下执行此操作？顺便说一句，我的主要目的是改变 <figcaptio> 的颜色悬停在 <figure> 上.

Answer 1

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

替换为

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