Question

我有一个悬停效果，我只想在视口的最小宽度为900px时触发。我希望在视口较小时禁用悬停效果。

我该怎么做？

PS：我使用Sass（SCSS）可能会有帮助。

这是我想要禁用的悬停效果的一小部分。它用于缩放图像

img {
    display: table-cell;
    width: 100%;
    max-width: $painting-max-width;
    max-height: $painting-max-height;

    margin: auto;

    // zoom in animation transition
    transition: $painting-zoom-delay;
    transition-timing-function: cubic-bezier(0.25,0.46,0.45,0.94) 0s;

    &:hover {
        max-width: $painting-zoom-size;
        max-height: $painting-zoom-size;
    }

}

Answer 1

仅当视口的大小至少为:hover时，才将900px样式插入到媒体查询中，因此您不需要稍后恢复该样式。

img {
    display: table-cell;
    width: 100%;
    max-width: $painting-max-width;
    max-height: $painting-max-height;

    margin: auto;

    // zoom in animation transition
    transition: $painting-zoom-delay;
    transition-timing-function: cubic-bezier(0.25,0.46,0.45,0.94) 0s;

    @media all and (min-width: 900px) {
        &:hover {
           max-width: $painting-zoom-size;
          max-height: $painting-zoom-size;
        }
    }

}

如何禁用CSS：悬停在媒体查询中？

1 个答案: