css - 由于悬停时的过渡/缩放，移动设备上的滚动困难

Question

我正在使用 Wordpress 主题(Modern Agency，Total 的一个子主题)。投资组合元素的图像会缩放，当您将鼠标悬停在它们上面时会出现一个图标。这也适用于移动设备，但这让滚动变得困难:我发现自己在屏幕上多次上下拖动手指以便滚动，因为我的移动浏览器 (iOS iPhone SE) 似乎坚持组合元素，因为反对滚动。

你可以找到网站here:

我已尝试自定义样式表，但找不到禁用图像缩放的方法。

这是我目前尝试过的:

.overlay-plus-hover, .overlay-plus-hover:hover, portfolio-entry-media-link, portfolio-entry-media-link:hover, portfolio-entry-img {
transition: none!important;
zoom: 0!important;
}

.wpex-image-hover,.wpex-image-hover:hover, .grow img:hover {
    transition: none!important;
    zoom: 0!important;
}

我想在移动设备上禁用过渡以允许平滑和正常的滚动。

Answer 1

为移动屏幕尺寸设置媒体查询并设置 transform属性为 none在 .wpex-image-hover.grow:hover img 上类。

例如:

@media screen and (max-width:480px) {
    .wpex-image-hover.grow:hover img {
        -ms-transform: none;
        -webkit-transform: none;
        -o-transform: none;
        -moz-transform: none;
        transform: none;
     }
 }