css - 我如何禁用 CSS :hover in a media query?

Question

我有一个悬停效果，我只想在视口(viewport)的最小宽度为 900 像素时触发。我想在视口(viewport)较小时禁用悬停效果。

我该怎么做呢？

PS:我正在使用 Sass (SCSS)，这可能会有所帮助。

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

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媒体查询中的样式，仅当视口(viewport)的大小至少为 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;
        }
    }

}