由于悬停时的转换/缩放，在移动设备上难以滚动

Posted 2021-04-14

我正在使用Wordpress主题（现代机构，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;
}

我想禁用移动设备上的转换，以便顺利和正常滚动。

答案

设置移动屏幕尺寸的媒体查询，并在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;
     }
 }