浏览器Hover事件响应滞后，快速移鼠时Overlay无法正常隐藏

我有一张图片，鼠标悬停时会显示overlay。正常情况下功能正常，但当快速移动鼠标（比如从页面顶部滑到底部）时，经过图片时overlay会显示，但离开后却无法隐藏。

我已尝试以下方法：

• 使用不同的事件处理器，如onMouseEnter和onMouseLeave、onMouseOver和onMouseOut，搭配onFocus和onBlur
• 条件CSS类：${!isHover && 'hidden'}

但始终得到相同的结果。请问有什么方法可以优化，让浏览器能跟上状态变化？

以下是简化后的代码：

const Photo = (): JSX.Element => {
  const [isHover, setHover] = useState<boolean>(false);

  const LayoutFactory = (): JSX.Element => {
    switch (true) {
      case archived:
        return <ArchiveLayout />;
      case Boolean(photo):
        return isHover ? (
          <HoverLayout />
        ) : (
          <IconPlayOutline />
        );
      default:
        return <></>;
    }
  };

  const MissingImageFactory = (): JSX.Element => {
    if (archived) {
      return (
        <div>
          // CONTENT
        </div>
      );
    }

    return <MissingImage />;
  };

  const LayoutWrapper = ({ children }: PropsWithChildren): JSX.Element => {
    return (
      <div>
        {children}
      </div>
    );
  };

  const HoverLayout = (): JSX.Element => {
    return (
      <LayoutWrapper>
        // CONTENT
      </LayoutWrapper>
    );
  };

  const ArchiveLayout = (): JSX.Element => {
    return (
      <LayoutWrapper>
        <div>
          // CONTENT
        </div>
      </LayoutWrapper>
    );
  };

  const Image = (): JSX.Element => {
    return photo ? (
      <img
        alt="annonce"
        src={photo}
      />
    ) : (
      <MissingImageFactory />
    );
  };

  return (
    <button
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      {...props}
    >
      // CONTENT
    </button>
  );
};

export default Photo;

1. 用CSS原生hover伪类替代React状态（推荐） #

完全通过CSS控制overlay的显示隐藏，不需要依赖React状态更新，从根源避免状态不同步问题。

修改思路：

• 给包裹元素（button）设置相对定位，overlay默认隐藏
• 使用:hover伪类触发overlay的显示

示例代码：

.photo-button {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: none;
  background: transparent;
}
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.photo-button:hover .overlay {
  opacity: 1;
}

组件中无需维护isHover状态，直接渲染overlay元素即可。

2. 给状态更新添加防抖 #

快速移动鼠标时，浏览器可能丢帧导致事件触发不及时，防抖可合并多次状态更新请求，确保最终状态正确。

示例代码：

import { useState, useCallback } from 'react';
import debounce from 'lodash.debounce';

const Photo = (): JSX.Element => {
  const [isHover, setHover] = useState<boolean>(false);

  const debouncedSetHover = useCallback(
    debounce((value) => setHover(value), 50),
    []
  );

  return (
    <button
      onMouseEnter={() => debouncedSetHover(true)}
      onMouseLeave={() => debouncedSetHover(false)}
      {...props}
    >
      // CONTENT
    </button>
  );
};

3. 确保事件容器的交互范围完整 #

检查button元素是否完全覆盖图片和overlay区域，避免鼠标快速移动时，离开的是子元素而非button容器，导致onMouseLeave未触发。

同时如果overlay会拦截鼠标事件，给它添加pointer-events: none让事件穿透到父元素：

.overlay {
  pointer-events: none;
}

4. 使用requestAnimationFrame确保状态更新时机 #

将状态更新放在requestAnimationFrame中，确保更新在浏览器重绘前执行，避免状态滞后：

const handleMouseEnter = () => {
  requestAnimationFrame(() => setHover(true));
};

const handleMouseLeave = () => {
  requestAnimationFrame(() => setHover(false));
};

// 在button中绑定事件
<button
  onMouseEnter={handleMouseEnter}
  onMouseLeave={handleMouseLeave}
  {...props}
>
  // CONTENT
</button>

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