如何在媒体查询中禁用CSS的:hover效果?

4
我有一个hover效果,只希望在视口宽度大于900px时触发。当视口较小时,我希望禁用hover效果。
如何实现?
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;
    }

}

1
正常尺寸下的悬停样式是什么? - AmmarCSE
我添加了一个小的代码片段。它基本上是一个缩放效果。 - cor
请查看这个答案,我认为它是你想要的: http://stackoverflow.com/a/10166533/4627253 - Miguel
2个回答

12

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

}

3

如果屏幕宽度大于899像素,您可以使用媒体查询来启用带悬停效果的特定类:

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

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接