我有一張照片，懸停時會顯示一個覆蓋圖。

一切都很好，但如果我用鼠標快速移動(例如從頁面的頂部到底部)，當我將鼠標懸停在照片上時，覆蓋圖會顯示出來，但懸停完成后不會隱藏。

以下是我的嘗試:

不同的事件處理程序，如onMouseEnter和onMouseLeave、onMouseOver和onMouseOut，都使用onFocus和onBlur 條件CSS類:${！伊索弗公司。& amp隱藏的' } 但總是得到同樣的結果。

有什么辦法可以改進這一點，讓瀏覽器可以跟蹤狀態變化嗎？

下面是簡化的代碼:

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;

我認為州政府無法跟上事件發生的速度。您可以嘗試在幾毫秒后檢查鼠標是否仍在畫面上，以& quot修復& quot它。我真的不喜歡這個解決方案，因為它非常粗糙，難以維護，而且可能很容易崩潰。

最好的方法可能是找到一個css解決方案，因為我認為這是大多數風格相關的問題。這些更容易維護，性能更高。優秀的老css仍然有很多優點:)