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

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;
        }
    }

}