如何通过jQuery触发CSS定义的.mydiv:hover悬停效果（禁用额外类）

嘿，我明白你的困扰了——直接触发mouseover、mouseenter这类事件没用，是因为CSS的:hover伪类是浏览器基于实际鼠标位置判断的状态，单纯通过JS触发事件并不会让浏览器认为元素处于“悬停”状态，所以样式不会生效。而且你不能加额外类，那我们换个思路：直接读取:hover伪类的样式，然后应用到元素上。

下面是具体的实现方案：

方法1：读取:hover样式并应用到元素 #

我们可以通过window.getComputedStyle()获取元素在:hover状态下的样式，然后把这个样式赋值给元素的行内样式，这样就能模拟出:hover的效果，而且完全不需要添加额外类。

// 获取元素:hover状态下指定属性的样式
function getHoverStyle(element, cssProp) {
  return window.getComputedStyle(element, ':hover').getPropertyValue(cssProp);
}

// 按钮点击事件
document.querySelector('#triggerBtn').addEventListener('click', () => {
  const targetDiv = document.querySelector('.mydiv');
  // 获取:hover状态下的背景色
  const hoverBgColor = getHoverStyle(targetDiv, 'background-color');
  // 应用到元素上
  targetDiv.style.backgroundColor = hoverBgColor;
  
  // 如果需要自动恢复原样式，可以加个定时器
  // setTimeout(() => {
  //   targetDiv.style.backgroundColor = '';
  // }, 1500);
});

方法2：强制触发浏览器的悬停状态（局限性较大） #

如果你真的想让浏览器认为元素处于悬停状态，可以尝试利用鼠标位置模拟，但这个方法兼容性一般，而且鼠标移出元素后样式会立刻消失，只适合临时效果：

document.querySelector('#triggerBtn').addEventListener('click', () => {
  const targetDiv = document.querySelector('.mydiv');
  // 获取元素在页面中的位置
  const rect = targetDiv.getBoundingClientRect();
  // 创建鼠标悬停事件，指定鼠标位置在元素内部
  const mouseOverEvent = new MouseEvent('mouseover', {
    clientX: rect.left + rect.width / 2,
    clientY: rect.top + rect.height / 2,
    bubbles: true
  });
  targetDiv.dispatchEvent(mouseOverEvent);
});

为什么之前的方法无效？ #

• mouseover/mouseenter事件：触发这些事件只会执行绑定的回调，但浏览器不会因为JS触发事件就维持:hover的样式状态——只有当鼠标实际停留在元素上时，:hover样式才会持续生效。
• jQuery的hover()方法：本质只是绑定了mouseenter和mouseleave事件，和上面的问题一样，无法触发浏览器的原生:hover伪类状态。

推荐使用方法1，它更稳定，完全符合你的需求，不需要修改原有CSS或添加额外类。

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