禁用 :hover CSS 在移动设备上

Posted 2023-03-06

【中文标题】禁用 :hover CSS 在移动设备上

【英文标题】：Disable :hover CSS on Mobile

【发布时间】：2016-12-02 21:10:16

【问题描述】：

我在页面上的一些 img 元素上定义了以下 CSS。

.my-image 
    width: 100% !important;
    height: auto;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -ms-transition: all .5s ease;
    transition: all .5s ease;


.my-image:hover 
    -webkit-transform:scale(1.5);
    -moz-transform:scale(1.5);
    -ms-transform:scale(1.5);
    transform:scale(1.5);

由于某种原因，每当我滚动经过它时，悬停类就会在 iPhone 上激活（也就是说，沿着图像移动我的手指以滚动经过它们）。有什么方法可以禁用仅适用于移动设备的悬停 CSS？

【问题讨论】：

您可以添加媒体标签，但这适用于屏幕尺寸

是的，这可能就是我想要的。

How to remove/ignore :hover css style on touch devices的可能重复

【参考方案1】：

添加媒体查询，如

@media screen and (min-width: 1024px)
.my-image:hover 
    -webkit-transform:scale(1.5);
    -moz-transform:scale(1.5);
    -ms-transform:scale(1.5);
    transform:scale(1.5);

【讨论】：

有趣，我最终得到了类似的东西......很好奇，这也能处理 iPad 吗？

ipad 屏幕尺寸 1024x768 横向 & 768x1024 纵向

【参考方案2】：

@media handheld 
.my-image:hover 
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    transform: none;

更新：2017 年 9 月 5 日，媒体查询 4 ​​规范被采用，其中 handheld 标记已被弃用。建议使用 hover 媒体查询 - 对于可以悬停的设备和无需单击的项目，以及不能单击的 not hover。

@media (not hover) 
.my-image:hover 
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    transform: none;

您也可以使用媒体查询pointer:(coarse|fine|one)。 coarse — 用于手指控制的触摸屏，fine 用于鼠标或触控笔，none 用于其他触摸屏。

@media (pointer:coarse) 
.my-image:hover 
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    transform: none;

【讨论】：

哇，手持是真正的媒体标签吗？

媒体类型列表：***.com/documentation/css/317/media-queries/7625/…

手持设备比瞄准屏幕尺寸更受欢迎吗？

我认为这与屏幕尺寸无关

不推荐使用“手持”媒体类型：developer.mozilla.org/es/docs/CSS/Media_queries