在祖先上选择:: before元素:悬停

Question

我有一个css三角形:

.triangle {
    display: block;
    height: 95px;
    position: relative;
}

.triangle::before, .triangle::after {
    content: ' ';

    width: 0;
    height: 0;

    position: absolute;

    border-style: solid;
    border-color: transparent;
}

.triangle::before {
    border-width: 10px 50px 85px 50px;
    border-bottom-color: #F5EACB;

    z-index: 2;
}

.triangle::after {
    border-width: 10px 56px 94px 56px;
    border-bottom-color: #FFFFFF;

    left: -6px;
    top: -6px;

    z-index: 1;
}

我想在以下情况下更改.triangle ::的border-bottom-color属性:hover应用于.triangle类.用css可以做到这一点吗？

我觉得它看起来像这样:

.triangle:hover .triangle::before {
    border-bottom-color: red;
}

或这个:

.triangle:hover .triangle::first-child {
    border-bottom-color: red;
}

但事实并非如此.

我不想使用js解决方案,因为文档的其余部分是纯css.

Answer 1

您想要组合选择器:

.triangle:hover::before {
    border-bottom-color: red;
}

上面是关于伪元素的带有类的元素triangle,当hoverd 时before.