我不知道为什么，但我要的悬停效果在整个vh中不起作用，但在我向下滚动到下面的内容后开始起作用。

有人知道为什么吗？

const DisplateDisplay = () => {
  const dispatch = useDispatch<AppDispatch>();
  const displates = useSelector((state: RootState) => state.displate.displates);

  let content = [];
  if (displates.length === 0) {
    content.push(<div>Loading...</div>);
  } else {
    displates.map((displate) => {
      content.push(
        <div
          className="flex flex-row items-center justify-center h-[300px] overflow-hidden"
          key={displate.id}
        >
          <label htmlFor="my-modal" key={displate.id}>
            <Image
              height={300}
              width={250}
              className="rounded-md hover:scale-125 duration-300 transition cursor-pointer"
              alt={displate.title || ""}
              src={`/images/${displate.category}/${displate.img}.jpg`}
              style={{ objectFit: "cover" }}
              onClick={() => dispatch(setCurrentDisplate(displate))}
            />
          </label>
        </div>
      );
    });
  }

  return (
    <div className="w-full lg:max-w-[1200px] xl:max-w-[1500px] md:max-w-[900px] sm:max-w-[700px] h-full grid lg:grid-cols-4 md:grid-cols-3 sm:grid-cols-2 gap-10 px-auto -z-50">
      {content}
    </div>
  );
};