如何在移动设备上删除导航栏的悬停动画？ [关闭]答案

【问题标题】：How can I remove my navbar's hover animation on mobile devices? [closed]如何在移动设备上删除导航栏的悬停动画？ [关闭]
【发布时间】：2022-08-18 12:31:54
【问题描述】：

我网站的导航栏有悬停动画，我想为移动设备删除这些动画。但是，我不确定如何“取消”或阻止它们发生。任何帮助是极大的赞赏！

我可以先问清楚吗？所以你希望导航栏中的所有链接都没有悬停动画吗？像底部边框？
@ProLuck 是的！我希望所有导航栏链接都没有动画。
好的，我将解释如何解决您的问题，首先您必须对屏幕（移动设备）进行调整，然后您将过渡到 none 并将悬停伪类中的宽度更改为 0
您需要在问题本身中包含代码

标签： html css

【解决方案1】：

您可以使用媒体查询来检测正在查看您网站的用户的屏幕宽度。然后在一定宽度上，您可以删除过渡。

@media screen and (max-width: 550px) {
   li a:hover:after{
      transition: none !important; /* To Remove Just Transition */
      width: 0; /* To Remove The Underline (Psuedo Element) */
    }
}

如果你有动画和过渡，你可以尝试设置animation-name:none;，它应该禁用所有动画。

【讨论】：

【解决方案2】：

如果这样做，您可以使用媒体查询并设置电话断点现在您可以编辑为动画设置的类并将其删除

如果你想用 JavaScript 来做，你可以设置条件。如果窗口最小 480 删除动画

【讨论】：