如何通过事件处理程序或原始 CSS 解决悬停时的轻弹问题？

Question

我在 img Hover 上遇到闪烁问题。

我想在 img 悬停时将所有 img 显示为从 6 到 3 的网格。为此，我使用事件处理程序和状态。但是，由于使用了事件函数，它给我带来了闪烁问题。

示例：当我在一个 img 上输入鼠标时，所有 img 都会占据 3 个网格，并在右侧 3 个网格上显示详细信息。但是当所有图像占用 3 grid，鼠标触发 mouseLeft 函数，所以所有图像立即占据 6 格。当占据 6 格时，鼠标再次点击 mouseEnter 函数，又占据 3 格。

我该如何解决这个问题？

我尝试使用原始CSS来解决这个问题。但我可以在 img 悬停时将主容器作为目标。我不知道如何将子级定位到父级 div 。

 const [selectedUniversity, setSelectedUniversity] = useState(null);

---

<div
    className={`grid grid-cols-3 justify-between items-start  container mx-auto`}
  >
    <div
      className={` transition-all duration-300 grid gap-6 ${
        selectedUniversity
          ? "col-span-1 sm:col-span-2 w-full grid-cols-1 sm:grid-cols-2 md:grid-cols-3 border-r-4 border-gray-300 h-[450px] overflow-y-scroll pr-5"
          : "col-span-3 w-full grid-cols-3 md:grid-cols-6 "
      } custom-scroll`}
    >
      {universities.map((university) => (
        <div
          key={university.id}
          className={` ${
            selectedUniversity?.id === university?.id
              ? "border-b-8 border-blue-800 shadow-lg"
              : ""
          }    bg-white p-3 flex justify-center items-center cursor-pointer duration-500 transition-all ease-in-out`}
          onMouseEnter={() => setSelectedUniversity(university)}
          onMouseLeave={() => setSelectedUniversity(null)}
        >
          <img
            src={university.image}
            className={` ${selectedUniversity ? "" : "w-full"}`}
            alt={university.name}
          />
        </div>
      ))}
    </div>

    {selectedUniversity && (
      <div
        className={`col-span-2 sm:col-span-1 flex flex-col gap-7 pl-5 ${
          selectedUniversity ? "w-full" : "w-0 transition-all duration-300"
        }`}
      >
        <div className="mx-auto text-center">
          <img
            src={selectedUniversity?.image}
            alt={selectedUniversity?.name}
          />
        </div>

        <h2 className="text-3xl md:text-4xl font-semibold mb-2">
          {selectedUniversity.name}
        </h2>
        <p className="">{selectedUniversity.details}</p>
        <p className="font-bold ">{selectedUniversity.tagline}</p>
        <div className="flex gap-2 items-center ">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 24 24"
            strokeWidth={1.5}
            stroke="currentColor"
            className="size-6 text-blue-600"
          >
            <path
              strokeLinecap="round"
              strokeLinejoin="round"
              d="M15 10.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"
            />
            <path
              strokeLinecap="round"
              strokeLinejoin="round"
              d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1 1 15 0Z"
            />
          </svg>
          <p className=""> Located at {selectedUniversity.location}</p>
        </div>
        <button className="btn  bg-blue-600 rounded-full text-white font-light w-full">
          Apply Now
        </button>
      </div>
    )}
  </div>

Answer 1

尝试定位父名称：悬停>子名称可能有效