html - 元素 + 元素无法访问 :before pseudo

Question

我遇到这样一种情况，我有两个元素在 DOM(邻居)中处于同一级别。当我悬停在 DOM 中之前的元素时，我希望显示它下面的元素。我还想访问我正在显示的元素的子元素并显示其 :before 伪元素。

SCSS

&__wrapper {
        display: table;
        table-layout: fixed;

        &:hover {

            + .filter-time__shortcuts {
                opacity: 1;
                visibility: visible;
                pointer-events: auto;
                transform: scale(1) translateY(0);

                .filter-time__shortcuts-list {
                    transform: scale(0.5);

                    &:before {
                        display: block;
                    }

                }

            }

        }

除了显示 :before 伪元素外，一切正常。由于某种原因，它无法访问它，但它可以访问 .filter-time__shortcuts-list。 当我将 :hover 移动到两个元素的父元素时，它们都是子元素并且不需要 + 选择器它就可以工作。这是怎么回事？

编译后的 CSS

.filter-time__wrapper:hover + .filter-time__shortcuts .filter-time__shortcuts-list:before {
        display: block; }

编辑:https://codepen.io/riogrande/pen/vWExqN

Answer 1

好的，答案是 css 确实访问了 :before 元素。事情是当我想用鼠标访问下拉菜单时，我不再真正悬停触发器了。当我将鼠标悬停在父项上时，我一直在悬停触发器(整个父项)。