javascript - slider 在点击时滑出，但我不想要这个

Question

我只需要在大屏幕上应用 css 更改下面不编译

&:hover:not(@media @smartphones),
&.hover-this:not(@media @smartphones) {
    width: 15rem;

    .row .label-area {
        display: inline-block;
        position: absolute;
        left: @icon-width;
    }

    + .menu { left: 16rem; }
}

我在屏幕左侧有一个 slider ，它滑出并占据更宽的宽度(15rem)但是智能手机没有悬停的东西，所以它会在点击时滑出，我不希望这种情况发生

Answer 1

媒体查询不是选择器，因此您不能将它们作为参数传递给 :not(否定)选择器。 The CSS negation selector only takes simple selectors as argument .

相反，您应该将 @media block 与逻辑 not 运算符一起使用，如下面的代码片段所示:(这只是您理解的示例，更改根据您的需要进行媒体查询)

&:hover, &.hover-this {
  @media not screen {
    width: 15rem;

    .row .label-area {
        display: inline-block;
        position: absolute;
        left: @icon-width;
    }

    + .menu { left: 16rem; }
  }
}

@icon-width: 16px;

---

下面是一个extract from the W3C Specs about the logical NOT operator : (出现在示例 7 下方)

The logical NOT can be expressed through the ‘not’ keyword. The presence of the keyword ‘not’ at the beginning of the media query negates the result. I.e., if the media query had been true without the ‘not’ keyword it will become false, and vice versa. User agents that only support media types (as described in HTML4) will not recognize the ‘not’ keyword and the associated style sheet is therefore not applied.