如何在移动设备上手动触发mouseleave事件以移除hover效果

问题原因 #

你手动触发mouseout事件无法让链接的橙色高亮消失，根本原因是移动端触摸触发的CSS :hover伪类状态由浏览器原生管理，和JavaScript层面触发的鼠标事件没有关联，jQuery的trigger('mouseout')只能触发你自己绑定的mouseout事件回调，没法让浏览器取消对当前元素:hover伪类的匹配。

解决方案 #

最稳定的实现方式是放弃直接使用CSS :hover伪类，改为通过JavaScript控制自定义类名实现高亮效果，具体实现代码如下：

1. 调整CSS代码 #

a {
  font-size: 2rem;
  color: #000; /* 替换为你原本的链接默认颜色 */
}
/* 用自定义类替代:hover伪类 */
a.hover-active {
  color: orange;
}

2. 调整JavaScript代码 #

$(window).on('load', function() {
  // 统一绑定高亮触发逻辑：鼠标悬浮、触摸时添加类
  $('a').on('mouseenter touchstart', function() {
    $(this).addClass('hover-active');
  });
  // 鼠标移出时移除类
  $('a').on('mouseout', function() {
    $(this).removeClass('hover-active');
  });

  // 定时器场景测试代码
  $('a').on('click', function() {
    const $target = $(this);
    setTimeout(function() {
      $target.removeClass('hover-active');
    }, 1000);
  });
});

3. 适配实际ajaxComplete场景 #

直接在ajaxComplete事件里移除所有链接的高亮类即可：

$(document).on('ajaxComplete', function () {
  $('a').removeClass('hover-active');
});

如果确实不想修改现有hover样式，也可以临时给元素重写内联样式覆盖:hover的颜色，等用户手动触发其他交互后再恢复，不过该方案兼容性不如自定义类方案稳定。

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