在移动设备和平板设备上禁用悬停答案

【问题标题】：Disable hover on mobile and tablet devices在移动设备和平板设备上禁用悬停
【发布时间】：2020-03-31 01:29:50
【问题描述】：

如何在移动设备和平板设备中禁用悬停？ img 标签是一个 SVG 文件。

scss 文件：

.menu-link:hover {
    img { filter: invert(40%) sepia(90%) saturate(2460%) hue-rotate(204deg) brightness(93%) contrast(93%); }
    .sidebar-text-menu { 
        font-weight: bold;
        color:$blue; 
        opacity: 1;
    }
    i{
           filter: invert(40%) sepia(90%) saturate(2460%) hue-rotate(204deg) brightness(93%) contrast(93%);
    }
}

【问题讨论】：

这可能对您有帮助 stackoverflow.com/questions/26754497/css-disable-hover-effect/…, stackoverflow.com/questions/5069110/…。只需在媒体查询中设置这些解决方案@media only screen and (max-width: 600px) {}
这能回答你的问题吗？ How to remove/ignore :hover css style on touch devices

标签： css svg sass hover media-queries

【解决方案1】：

对于@media 查询hover 和pointer 有很好的浏览器支持。您可以将它们组合使用以获得您正在寻找的效果：

@media(hover: hover) and (pointer: fine) {
    .menu-link:hover {
        /* Targeting devices with mouse cursor and :hover */
    }
}

基于width 的定位设备很可能包括一些移动设备，在这种情况下这不是您想要的。

【讨论】：