如何通过编程方式激活元素的伪类状态？

嘿，这个问题我之前也踩过坑！用dispatchEvent模拟鼠标事件有时候确实不好使，尤其是你想持久保持伪类样式的时候——浏览器对模拟事件触发原生伪类的限制还挺多的，而且就算触发了，只要鼠标移开或者其他事件干扰，状态就没了。下面给你几个不用修改原CSS伪类定义的可行方案：

1. 用自定义类模拟伪类状态（最推荐） #

这个方法完全符合你的需求：不用动原CSS，还能持久控制状态，批量操作多个元素也很方便。

原理很简单：新增一个和目标伪类样式完全一致的自定义类，然后通过JS/React给元素添加/移除这个类，就能达到和激活伪类一模一样的效果。

举个例子：
假设你的原CSS已经有了:hover的定义：

button:hover {
  background: #007bff;
  color: white;
  border-radius: 4px;
}

你只需要新增一段额外的CSS（可以是组件内的样式，也可以是全局的补充样式）：

button.forced-hover {
  /* 完全复制原:hover的样式 */
  background: #007bff;
  color: white;
  border-radius: 4px;
}

然后在React里实现控制逻辑：

import { useState, useRef } from 'react';

function App() {
  const [isHoverActive, setIsHoverActive] = useState(false);
  // 用ref数组存储多个按钮的DOM引用
  const buttonRefs = useRef([]);

  // 批量激活所有按钮的hover状态
  const activateAllHover = () => {
    buttonRefs.current.forEach(btn => {
      btn.classList.add('forced-hover');
    });
  };

  // 批量取消激活
  const deactivateAllHover = () => {
    buttonRefs.current.forEach(btn => {
      btn.classList.remove('forced-hover');
    });
  };

  return (
    <div>
      {/* 给每个按钮绑定ref */}
      <button ref={el => buttonRefs.current.push(el)}>按钮1</button>
      <button ref={el => buttonRefs.current.push(el)}>按钮2</button>
      <button ref={el => buttonRefs.current.push(el)}>按钮3</button>
      
      <div style={{ marginTop: '10px' }}>
        <button onClick={activateAllHover}>激活所有hover样式</button>
        <button onClick={deactivateAllHover} style={{ marginLeft: '10px' }}>取消hover样式</button>
      </div>
    </div>
  );
}

这个方法的好处太明显了：完全不修改原CSS的伪类定义，样式和原伪类完全一致，状态完全可控，想保持多久就保持多久，批量操作也轻松。

2. 用CSS变量统一管理样式（进阶优化） #

如果你的原CSS本来就用了CSS变量来管理样式，那这个方法更省心——不用复制样式，还能自动同步原伪类的修改。

比如原CSS是这样写的：

:root {
  --button-hover-bg: #007bff;
  --button-hover-color: white;
}

button:hover {
  background: var(--button-hover-bg);
  color: var(--button-hover-color);
}

那你的自定义类直接复用这些变量就行：

button.forced-hover {
  background: var(--button-hover-bg);
  color: var(--button-hover-color);
}

这样以后原伪类的样式修改了，你的自定义类会自动同步，不用手动更新代码，维护起来超方便。

3. 直接操作元素style属性（应急可用，不推荐） #

如果不想加额外的CSS类，也可以直接用JS设置元素的style属性，把伪类的样式直接写进去：

const activateAllHover = () => {
  buttonRefs.current.forEach(btn => {
    btn.style.background = '#007bff';
    btn.style.color = 'white';
    btn.style.borderRadius = '4px';
  });
};

const deactivateAllHover = () => {
  buttonRefs.current.forEach(btn => {
    // 清空设置的样式，恢复原样式
    btn.style.background = '';
    btn.style.color = '';
    btn.style.borderRadius = '';
  });
};

不过这个方法缺点很明显：如果原伪类样式复杂，要写一大堆style属性，而且原CSS修改后这里也要手动同步，维护成本很高，所以只适合应急用。

为什么你之前的dispatchEvent方法没用？ #

浏览器为了防止滥用，对于模拟的鼠标事件（比如mouseover），不一定会触发原生的伪类样式；而且就算触发了，只要鼠标移开或者其他事件触发，状态就会消失，没法持久保持——所以这种方法只适合临时触发一次伪类效果，不满足你要持久控制的需求。

备注：内容来源于stack exchange，提问作者augusto amaral