Media query hover:none异常激活，链接始终显示border-bottom问题求助

你的代码问题在于，:hover样式未限制在支持hover能力的设备下，同时部分设备的特性检测逻辑冲突，导致所有场景都显示下划线。按以下方式修改代码即可实现需求：

修改后的Sass代码：

$base-color: black

:root
  color: $base-color

a
  color: inherit
  text-decoration: none
  border-bottom: none /* 显式清除默认边框，避免浏览器样式干扰 */

  // 无hover能力的设备（如触屏），始终显示下划线
  @media (hover: none)
    border-bottom: 2px solid $base-color

  // 支持hover的设备，仅在hover状态显示下划线
  @media (hover: hover)
    &:hover
      border-bottom: 2px solid $base-color

逻辑说明： #

• 默认状态下，链接不显示下划线（通过border-bottom: none确保样式重置）
• 针对无hover能力的设备，通过@media (hover: none)强制显示下划线
• 针对支持hover的设备，仅在:hover触发时才显示下划线

内容的提问来源于stack exchange，提问作者theking2