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

Question

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

我该怎么做？

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

仅当视口的大小至少为 900px 宽时，才在媒体查询中插入 :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;

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

}

Answer 2

只有当屏幕宽度超过 899 像素时，您才可以使用媒体查询来启用特定的 class 吸尘器效果：

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

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

How do i disable CSS :hover in a media query?

css

hover

responsive-design