如何在CSS/React中点击按钮时修改指针图标及hover样式？

问题核心是浏览器默认给<button>、<a>这类可点击元素设置了cursor: pointer，该样式优先级高于body上的光标设置，所以hover时会覆盖你的自定义光标。

解决方案步骤： #

1. 修改React逻辑，用类名+CSS变量管理激活状态
   把直接设置body样式改成添加类名，并通过CSS变量传递光标路径，方便全局复用：

   useEffect(() => {
     const body = document.body;
     if (isCursorButtonPressed) {
       body.classList.add('custom-cursor-active');
       // 用CSS变量存储光标路径
       body.style.setProperty('--custom-cursor-url', `url(${cursorIcon})`);
     } else {
       body.classList.remove('custom-cursor-active');
       body.style.removeProperty('--custom-cursor-url');
     }
   }, [isCursorButtonPressed, cursorIcon]);
   

2. 添加全局CSS规则，覆盖可点击元素的默认光标
   针对激活状态下的body，覆盖所有可点击元素的光标样式：

   /* 全局激活自定义光标 */
   .custom-cursor-active {
     cursor: var(--custom-cursor-url), auto;
   }
   
   /* 覆盖所有可点击元素的hover光标 */
   .custom-cursor-active button,
   .custom-cursor-active a,
   .custom-cursor-active [role="button"],
   .custom-cursor-active input[type="button"],
   .custom-cursor-active input[type="submit"],
   .custom-cursor-active select {
     cursor: var(--custom-cursor-url), auto !important;
   }
   
   /* 光标按钮的激活样式也用统一变量 */
   .cursor-button.active {
     cursor: var(--custom-cursor-url), auto;
   }
   

说明： #

• 用CSS变量--custom-cursor-url可以避免重复书写光标路径，修改时只需更新一处。
• 添加!important是为了确保自定义样式优先级高于浏览器默认的cursor: pointer，如果你的选择器优先级足够（比如用更高权重的选择器）也可以省略，但!important在这里是最直接的解决方式。
• 列出的可点击元素覆盖了常见的交互元素，你可以根据自己的页面需求补充或调整。

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