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伪元素上hover d的类before的元素。

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

1 个答案: