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

Posted 2023-05-08

技术标签:

【中文标题】在移动设备和平板设备上禁用悬停【英文标题】：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%);

【问题讨论】：

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

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

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

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

【讨论】：